سلايد شو بسيط لكنه رغم ذالك جميل

سلايد شو بسيط لكنه رغم ذالك جميل وسهل التركيب ويمكنك التحكم في حجمه

لإضافة هذا السلايد شو لمدونتك كل ما عليك هو إضافة أداة جديدة ثم ضع فيها هذا الكود

 <style type="text/css"> #simplegallery2 { //CSS for sample Gallery position: relative; visibility: hidden; border: 5px solid black; margin: auto; } #simplegallery2 .gallerydesctext { //CSS for description DIV of Example 1 (if defined) text-align: left; padding: 2px 5px; font-family: calibri; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://code.helperblogger.com/image-gallery.js"> </script> <script type="text/javascript"> var mygallery2=new simpleGallery({ wrapperid: "simplegallery2", //ID of main gallery container, dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly imagearray: [ ["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"] ], autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] persist: true, fadeduration: 1000, //transition duration (milliseconds) oninit:function(){ //event that fires when gallery has initialized/ ready to run }, onslide:function(curslide, i){ //event that fires after each slide is shown //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML) //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) } }) </script> <div id="simplegallery2"> </div>

لا تنسى تغيير 400 و 256 بالحجم الذي تريد

ثم غير IMAGE LINK HERE برابط صورك

بعد ذالك غير IMAGE DESCRIPTION HERE بعنوان الموضوع

وفي الأخير غير # برابط الموضوع

وهكذا تكون قد انتهيت

بالتوفيق