Cara Membuat Widget Slideshow (Galeri Gambar) Bertombol

<div style="text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBKJqOXkI86ywnK0eZQi0RiBIF98JKb0D2RE_jmXr8vOaoRyQnElmHWM823DOGXeRHtcxGmWV6fUqY6SQzMtEhJ2h_75wDnw2g0tpQKPhMRoqBzA3b6rbwqOWP78cSTMtollhen1m7/s1600/Widget+Galeri+Gambar.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBKJqOXkI86ywnK0eZQi0RiBIF98JKb0D2RE_jmXr8vOaoRyQnElmHWM823DOGXeRHtcxGmWV6fUqY6SQzMtEhJ2h_75wDnw2g0tpQKPhMRoqBzA3b6rbwqOWP78cSTMtollhen1m7/s1600/Widget+Galeri+Gambar.PNG" /></a>Widget Galeri Gambar digunakan untuk menyimpan berbagai gambar yang dapat anda simpan pada widget ini. Widget Galeri Gambar ini berfungsi hampir sama dengan slider gambar, Melainkan Galeri Gambar Terdapat pada Sidebar dan slider gambar terdapat di atas poting atau sidebar dan menyimpan gambar yang cukup besar. Widget ini dibutuhkan bagi anda yang mempunyai blog yang bertujuan untuk bisnis yang banyak menampilkan beberapa produk yang anda jual. Apa Kelebihan dari widget ini?, Widget ini mudah untuk anda pasang, dan tidak perlu mengedit HTML template hanya menambahkan widget HTML, Tidak Banyak memakan tempat dan anda bisa atur ukuran dari widget Galeri ini, Widget ini Juga Dilengkapi dengan Tombol Kontrol, Dan mempunyai fitur berjalan seperti slide gambar. Widget ini memakai kode Jquery, JavaScript dan CSS, yang diramkum menjadi kode HTML yang mudah untuk dipakai yang dibuat oleh . Untuk melihat demonya klik gambar yang ada dibawah ini. Untuk Memasang Widget Galeri Gambar, Berikut Cara Untuk memasangnya:</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> </div> <ul> <li>Silahkan Login Ke Blogger Anda.</li> <li>Setelah itu, Klik Menu Tata Letak, --> Klik Tombol Add Gadget, Lalu Tambahkan Widget HTML.</li> <li>Masukan Kode Berikut ini :</li> </ul> <br /> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><o:p></o:p></span></div> <div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"><style type="text/css"><o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">/*Make sure your page contains a valid doctype at the top*/<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">#simplegallery1{ //CSS for Simple Gallery Example 1<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">position: relative; /*keep this intact*/<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">visibility: hidden; /*keep this intact*/<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">border: 1px solid #666;<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">text-align: left;<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">padding: 2px 5px;<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">font: 10px normal verdana, arial;<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"></style><o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"><script type="text/javascript" ><o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var simpleGallery_navpanel={<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5OQWm0AcxLVr57KowlL1-VK7pcbaxH3ax10XB8mTHnGffyhRwtJxoFDrPCKO1ljhgmK8524lDam4KIGflG0OGvR65Wuyq5wZy9oLL2rVrkR5EhUa4W-69fVYqCvIRP2H39luyyCxCyg8/s400/ajaxload.gif', //full path or URL to loading gif image<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">images: [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWA0yb9AF9uHOpWadVaZYrR5Nn0q3zrUYTzsgx5PJZr1W-xKp7myw-lGgmZfEl6EYsQ3SW0eVefPaHW_cWnBjmg1F1hVftotepVytRWIDjgYC5KMmK2eOHF6oD9mljv89PVeLbNMJvS0U/s400/left.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGdBL-DdNdKdgNuvqiYDzBB_4ZANYmG_Earlyud-66DvC6C7Ve8C638PljhsGI6tdejKSS3cYxkeQ6HmQyKampnJyV_bTAtUZ3y6BMDQy26lSbmP3ob-Y4b2PNHY3U1p_bU_0oPsZvcw/s400/play.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7V45faErmwXRXdy9cLO6GcrQsS_QtrxtcLDC9aOneaeQ0F5-ejt2Pi0mLjZ9uXzhLQ0TDO0Ngb3Q7of5rUOs1fVfppvUnPjMJ5kDZh1SQnkHWV-0ydKeeYzZQbpXI68nwOYB-OAjzmHQ/s400/right.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfN9V4TrI9xtoFKbgAuTeYkRdUeGSNFD9eteyX_T_VxUfGqmqSxp7thA09vW8uG8eNKNP82g8qdCgduLw9eVjBLOHFfb4dlZ9XD2OPQg0cgvDoOORWMqoHNtj6kwHbu8zBJRajFUz4NoA/s400/pause.gif'], //nav panel images (in that order)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideduration: 500 //duration of slide up animation to reveal panel<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">function simpleGallery(settingarg){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">this.setting=settingarg<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">settingarg=null<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var setting=this.setting<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.fadeduration=parseInt(setting.fadeduration)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.currentstep=0 //keep track of # of slides slideshow has gone through<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.oninit=setting.oninit || function(){}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.onslide=setting.onslide || function(){}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var preloadimages=[], longestdesc=null, loadedimages=0<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$loadinggif=(function(){ //preload and ref ajax loading gif<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var loadgif=new Image()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">loadgif.src=simpleGallery_navpanel.loadinggif<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">})()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">for (var i=0; i<setting.imagearray.length; i++){ //preload slideshow images<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">preloadimages[i]=new Image()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">preloadimages[i].src=setting.imagearray[i][0]<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.longestdesc=setting.imagearray[i][3]<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">jQuery(preloadimages[i]).bind('load error', function(){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">loadedimages++<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (loadedimages==setting.imagearray.length){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">dfd.resolve() //indicate all images have been loaded<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var slideshow=this<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">jQuery(document).ready(function($){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var setting=slideshow.setting<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">return<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.css({position:'absolute', left:0, top:0})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.appendTo(setting.$wrapperdiv)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.descdiv=simpleGallery.routines.adddescpanel(setting)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">$(setting.navbuttons).filter('img.navimages').css({opacity:0.8})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.bind('mouseover mouseout', function(e){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">$(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.bind('click', function(e){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var keyword=e.target.title.toLowerCase()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow.navigate(keyword) //assign behavior to nav images<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">dfd.done(function(){ //execute when all images have loaded<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$loadinggif.remove()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow.showslide(setting.curimage) //show initial slide<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.oninit.call(slideshow) //trigger oninit() event<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">$(window).bind('unload', function(){ //clean up and persist<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">$(slideshow.setting.navbuttons).unbind()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (slideshow.setting.persist) //remember last shown image's index<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">jQuery.each(slideshow.setting, function(k){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (slideshow.setting[k] instanceof Array){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">for (var i=0; i<slideshow.setting[k].length; i++){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow.setting[k][i].innerHTML=null<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow.setting[k][i]=null<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (slideshow.setting[k].innerHTML) //catch gallerydesctext div<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow.setting[k].innerHTML=null<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow.setting[k]=null<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow=slideshow.setting=null<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}) //end deferred code<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}) //end jQuery domload<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">simpleGallery.prototype={<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">navigate:function(keyword){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">clearTimeout(this.setting.playtimer)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (!isNaN(parseInt(keyword))){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">this.showslide(parseInt(keyword))<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">else if (/(prev)|(next)/i.test(keyword)){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">this.showslide(keyword.toLowerCase())<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">else{ //if play|pause button<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var slideshow=this<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var $playbutton=$(this.setting.navbuttons).eq(1)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (!this.setting.ispaused){ //if pause Gallery<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">this.setting.autoplay[0]=false<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">$playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">else if (this.setting.ispaused){ //if play Gallery<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">this.setting.autoplay[0]=true<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">$playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow.setting.ispaused=!slideshow.setting.ispaused<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">},<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">showslide:function(keyword){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var slideshow=this<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var setting=slideshow.setting<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var totalimages=setting.imagearray.length<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">: Math.min(keyword, totalimages-1)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex])<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">clearTimeout(setting.playtimer)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.gallerylayers[setting.bglayer].innerHTML=null //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">try{<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}catch(e){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.currentstep+=1<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (setting.autoplay[0]){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (setting.currentstep<=setting.totalsteps)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">else<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">slideshow.navigate("play/pause")<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}) //end callback function<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.fglayer=setting.bglayer<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.bglayer=(setting.bglayer==0)? 1 : 0<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.curimage=imgindex<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (setting.imagearray[imgindex][3]){ //if this slide contains a description<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$descpanel.css({visibility:'visible'})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.descdiv.innerHTML=setting.imagearray[imgindex][3]<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.descdiv.innerHTML=null<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$descpanel.css({visibility:'hidden'})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">},<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">showhidenavpanel:function(state){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var setting=this.setting<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">this.showhidedescpanel(state)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">},<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">showhidedescpanel:function(state){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var setting=this.setting<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var endpoint=(state=="show")? 0 : -setting.descpanelheight<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">simpleGallery.routines={<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">getSlideHTML:function(imgelement){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">layerHTML+=(imgelement[1])? '</a>' : ''<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">return layerHTML //return HTML for this layer<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">},<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">addnavpanel:function(setting){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var interfaceHTML=''<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">for (var i=0; i<3; i++){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next')<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i]<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> '<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>'<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$navpanel=$('<div class="navpanellayer"></div>')<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.appendTo(setting.$wrapperdiv)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">$('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.appendTo(setting.$navpanel)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">},<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">adddescpanel:function(setting){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>')<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.find('div').css({position:'absolute', left:0, top:0, width:'100%'})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.eq(1).css({color:'white'}).end() //"gallerydescfg" div<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.eq(2).html(setting.longestdesc).end().end()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">.appendTo(setting.$wrapperdiv)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.descpanelheight=$gallerydesctext.outerHeight()<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">},<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">getCookie:function(Name){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">if (document.cookie.match(re)) //if cookie found<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">return document.cookie.match(re)[0].split("=")[1] //return its value<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">return null<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">},<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">setCookie:function(name, value){<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">document.cookie = name+"=" + value + ";path=/"<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"></script><o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"><script type="text/javascript"><o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">var mygallery=new simpleGallery({<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">wrapperid: "simplegallery1", //ID of main gallery container,<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">dimensions: [<span style="color: red;">300</span>, <span style="color: red;">200</span>], //width/height of gallery in pixels. Should reflect dimensions of the images exactly<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">imagearray: [<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">["<span style="color: yellow;">URL Gambar Anda (1)</span>", "<span style="color: lime;">#</span>", "_new", "</span><span style="color: blue; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 24px;">Descripsi Gambar Anda</span><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">"],<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">["<span style="color: yellow;">URL Gambar Anda (2)</span>", "<span style="color: lime;">#</span>", "_new", "</span><span style="color: blue; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 24px;">Descripsi Gambar Anda</span><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">"],<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">["<span style="color: yellow;">URL Gambar Anda (3)</span>", "</span><span style="color: lime; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 24px;">#</span><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">", "_new", "</span><span style="color: blue; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 24px;">Descripsi Gambar Anda</span><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">"],<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">["<span style="color: yellow;">URL Gambar Anda (4)</span>", "</span><span style="color: lime; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 24px;">#</span><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">", "_new", "</span><span style="color: blue; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 24px;">Descripsi Gambar Anda</span><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">"],<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">["<span style="color: yellow;">URL Gambar Anda (5)</span>", "</span><span style="color: lime; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 24px;">#</span><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">", "_new", "<span style="color: blue;">Descripsi Gambar Anda</span>"]<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">],<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">autoplay: [<span style="color: orange;">true, 2000</span>, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">persist: false, //remember last viewed slide and recall within same session?<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">fadeduration: 500, //transition duration (milliseconds)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">oninit:function(){ //event that fires when gallery has initialized/ ready to run<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">},<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">onslide:function(curslide, i){ //event that fires after each slide is shown<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">//Keyword "this": references current gallery instance<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">}<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;">})<o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"></script><o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"><div id="simplegallery1"></div><o:p></o:p></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"><br /></span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> <span style="font-family: Times, Times New Roman, serif; line-height: 24px;">Keterangan:</span></div> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> </div> <ol> <li><span style="font-family: Times, Times New Roman, serif; line-height: 24px; text-indent: 0cm;">Kode Yang Berwarna <span style="color: red;">Merah</span> adalah Ukuran Dari Galeri Gambar, 300 adalah lebar dari Galeri Gambar, Dan 200 adalah Tinggi Galeri Gambar.</span></li> <li><span style="font-family: Times, Times New Roman, serif; line-height: 24px; text-indent: 0cm;">Kode Yang Berwarna <span style="color: yellow;">Kuning</span> adalah URL dari gambar galeri, dan ubahlah dengan url gambar anda.</span></li> <li><span style="font-family: Times, Times New Roman, serif; line-height: 24px; text-indent: 0cm;">Kode Yang Berwarna <span style="color: lime;">Hijau</span> adalah URL yang akan dituju, Ganti dengan URL dimana Gambar Berasal.</span></li> <li><span style="font-family: Times, Times New Roman, serif; line-height: 24px; text-indent: 0cm;">Kode Yang Berwarna <span style="color: blue;">Biru</span> adalah Descripsi dari Gambar atau Judul dari gambar.</span></li> <li><span style="font-family: Times, Times New Roman, serif; line-height: 24px; text-indent: 0cm;">Jika Anda ingin mengubahkan Jenis dari Galeri Gambar tidak ingin berjalan otomatis ganti kode yang berwarna <span style="color: orange;">Orange </span>dari true menjari false , dan jika ingin mengubah waktu dari Gambar Berjalan ganti kode 2000 dengan yang waktu yang anda mau.</span></li> <li><span style="font-family: Times, Times New Roman, serif; line-height: 24px; text-indent: 0cm;">Dan untuk menambahkan Kapasitas Gambar Tambahkan Kode Berikut ini dibawah kode imagearray: [ :</span></li> </ol> <div> <span style="font-family: Times New Roman, serif;"><span style="line-height: 24px;"><br /></span></span></div> <br /> <div align="left" class="MsoNormal" style="margin-left: 3.4pt; text-indent: 0cm;"> </div> </div> <div> <br /></div> <div style="text-align: justify;"> <br /></div>

Blogger Tips Cara Membuat Widget Slideshow (Galeri Gambar) Bertombol

Widget Galeri Gambar digunakan untuk menyimpan berbagai gambar yang dapat anda simpan pada widget ini. Widget Galeri Gambar ini berfungsi hampir sama dengan slider gambar, Melainkan Galeri Gambar Terdapat pada Sidebar dan slider gambar terdapat di a…

Read more »