/* Ultimate Fade-in slideshow (v2.4) * Last updated: May 24th, 2010. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ //Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize //May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added. var fadeimages = new Array() //SET IMAGE PATHS. Extend or contract array as neededSLA11_11_L_A4OP.png fadeimages[0] = ["images/Banner/Forever_UniqueSlide_0.png", "http://www.chardonnayboutique.co.uk/ladies-designer-clothing-new-a-w-collection-collection-shop-online~35.aspx", "_self", "NEW! A/W Collection"] //plain image syntax fadeimages[1] = ["images/Banner/Forever_Unique_-_Slide_1.png", "http://www.chardonnayboutique.co.uk/buy-online-new-in-forever-unique-ian-animal-print-dress~1193.aspx", "_self", "NEW! A/W Collection"] //plain image syntax fadeimages[2] = ["images/Banner/Forever_Unique_-_Slide_2.png", "http://www.chardonnayboutique.co.uk/buy-online-new-in-forever-unique-stardust-prom-dress~6040.aspx", "_self", "NEW! A/W Collection"] //plain image syntax fadeimages[3] = ["images/Banner/Forever_Unique_-_Slide_3.png", "http://www.chardonnayboutique.co.uk/buy-online-new-in-forever-unique-cody-butterfly-prom-dress~1146.aspx", "_self", "NEW! A/W Collection"] //fadeimages[3] = ["images/Banner/Mascara_-_Image_4_for_slideshow.jpg", "ladies-designer-clothing-new-a-w-collection-collection-shop-online~35.aspx", "_self", "Chardonnay"] //plain image syntax //fadeimages[4] = ["images/Banner/Soaked_In_Luxury_-_Image_5_for_slideshow.jpg", "ladies-designer-clothing-new-a-w-collection-collection-shop-online~35.aspx", "_self", "Chardonnay"] //plain image syntax //fadeimages[5] = ["images/Banner/SLA11_05_L_A5OP.jpg", "ladies-designer-clothing-new-a-w-collection-collection-shop-online~35.aspx", "_self", "Chardonnay"] //plain image syntax //fadeimages[5] = ["images/Banner/SLA11_05_L_A5OP", "ladies-designer-clothing-new-a-w-collection-collection-shop-online~35.aspx", "_self", "Chardonnay"] //plain image syntax //fadeimages[6] = ["images/Banner/autumn1.jpg", "products.aspx?cid=35", "_self", "Chardonnay"] //plain image syntax //fadeimages[7] = ["images/Banner/autumn2.jpg", "products.aspx?cid=35", "_self", "Spring Summer Collection 2011"] //plain image syntax //fadeimages[8] = ["images/Banner/spring-summer-collection2.jpg", "products.aspx?cid=27", "_self", "Spring Summer Collection 2011"] //plain image syntax //fadeimages[9] = ["images/Banner/spring-summer-collection1.jpg", "products.aspx?cid=27", "_self", "Spring Summer Collection 2011"] //plain image syntax //fadeimages[10] = ["images/Banner/forever-unique-celebrities6.jpg", "brand-products.aspx?manufacturer=73", "_self", "Chardonnay"] //plain image syntax //fadeimages[11] = ["images/Banner/forever-unique-celebrities7.jpg", "brand-products.aspx?manufacturer=73", "_self", "Chardonnay"] //plain image syntax //fadeimages[12] = ["images/Banner/forever-unique-celebrities1.jpg", "brand-products.aspx?manufacturer=73", "_self", "Chardonnay"] //plain image syntax //fadeimages[13] = ["images/Banner/forever-unique-celebrities2.jpg", "brand-products.aspx?manufacturer=73", "_self", "Chardonnay"] //plain image syntax //fadeimages[10] = ["images/Banner/forever-unique-celebrities3.jpg", "brand-products.aspx?manufacturer=73", "_self", "Chardonnay"] //plain image syntax //fadeimages[11] = ["images/Banner/chardonnay10.jpg", "brand-products.aspx?manufacturer=74", "_self", "Chardonnay"] //plain image syntax //fadeimages[12] = ["images/Banner/chardonnay11.jpg", "brand-products.aspx?manufacturer=74", "_self", "Chardonnay"] //plain image syntax //fadeimages[13] = ["images/Banner/chardonnay12.jpg", "brand-products.aspx?manufacturer=74", "_self", "Chardonnay"] //plain image syntax //fadeimages[14] = ["images/Banner/forever-unique-celebrities4.jpg", "brand-products.aspx?manufacturer=73", "_self", "Chardonnay"] //plain image syntax //fadeimages[15] = ["images/Banner/forever-unique-celebrities5.jpg", "brand-products.aspx?manufacturer=73", "_self", "Chardonnay"] //plain image syntax //fadeimages[16] = ["images/Banner/aleisha-dixson.jpg", "products-details.aspx?PId=1303", "_self", "Chardonnay Mascara aleisha-dixson"] //plain image syntax //fadeimages[17] = ["images/Banner/danni-minogue-homepage.jpg", "products-details.aspx?PId=1138", "_self", "Chardonnay"] //plain image syntax //fadeimages[18] = ["images/Banner/forever-unique-celebrities8.jpg", "brand-products.aspx?manufacturer=73", "_self", "Chardonnay"] //plain image syntax //fadeimages[14] = ["images/Banner/chardonnay2.jpg", "products.aspx?cid=6", "_self", "Chardonnay"] //plain image syntax //fadeimages[6] = ["images/Banner/chardonnay3.jpg", "products.aspx?cid=7", "_self", "Chardonnay"] //plain image syntax //fadeimages[7] = ["images/Banner/chardonnay4.jpg", "products.aspx?cid=6", "_self", "Chardonnay"] //plain image syntax //fadeimages[8] = ["images/Banner/chardonnay5.jpg", "products.aspx?cid=6", "_self", "Chardonnay"] //plain image syntax //fadeimages[9] = ["images/Banner/chardonnay7.jpg", "products.aspx?cid=6", "_self", "Chardonnay"] //plain image syntax //fadeimages[10] = ["images/Banner/chardonnay6.jpg", "products.aspx?cid=6", "_self", "Chardonnay"] //plain image syntax //fadeimages[11] = ["images/Banner/chardonnay8.jpg", "products.aspx?cid=6", "_self", "Chardonnay"] //plain image syntax //fadeimages[12] = ["images/Banner/chardonnay9.jpg", "products.aspx?cid=6", "_self", "Chardonnay"] //plain image syntax //fadeimages[13] = ["images/Banner/chardonnay1.jpg", "products.aspx?cid=6", "_self", "Chardonnay"] //plain image syntax var delivery = new Array() //SET IMAGE PATHS. Extend or contract array as needed delivery[0] = ["images/freedelivery.png", "", "", "Chardonnay"] //plain image syntax //delivery[0] = ["images/freedelivery.jpg", "", "", "Chardonnay"] //plain image syntax //delivery[1] = ["images/launch-offer.jpg", "", "", "Chardonnay"] //plain image syntax var paypal = new Array() //SET IMAGE PATHS. Extend or contract array as needed //paypal[0] = ["images/special-offer-top.jpg", "products.aspx?cid=24","_self", "Special Offer 50 % Discount", "Chardonnay"] //plain image syntax paypal[1] = ["images/paypal2.jpg", "", "", "Chardonnay"] //plain image syntax paypal[0] = ["images/paypal1.jpg", "", "", "Chardonnay"] //plain image syntax paypal[2] = ["images/secure-shopping.jpg", "", "", "Chardonnay"] //plain image syntax //paypal[1] = ["images/special-offer-top.jpg", "products.aspx?cid=24", "_self", "Special Offer 50 % Discount", "Chardonnay"] //plain image syntax var dynasty = new Array() //SET IMAGE PATHS. Extend or contract array as needed dynasty[0] = ["Images/dynasty/dyansty-banner1.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[1] = ["Images/dynasty/dyansty-banner2.jpg", "products.aspx?cid=27", "_self","Dynasty"] //plain image syntax dynasty[2] = ["Images/dynasty/dyansty-banner3.jpg", "products.aspx?cid=27", "_self","Dynasty"] //plain image syntax dynasty[3] = ["Images/dynasty/dyansty-banner4.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[4] = ["Images/dynasty/dyansty-banner5.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[5] = ["Images/dynasty/dyansty-banner6.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[6] = ["Images/dynasty/dyansty-banner7.jpg", "products.aspx?cid=27", "_self","Dynasty"] //plain image syntax dynasty[7] = ["Images/dynasty/dyansty-banner8.jpg", "products.aspx?cid=27", "_self","Dynasty"] //plain image syntax dynasty[8] = ["Images/dynasty/dyansty-banner9.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[9] = ["Images/dynasty/dyansty-banner10.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[10] = ["Images/dynasty/dyansty-banner11.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[11] = ["Images/dynasty/dyansty-banner12.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[12] = ["Images/dynasty/dyansty-banner13.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[13] = ["Images/dynasty/dyansty-banner14.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[14] = ["Images/dynasty/dyansty-banner15.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[15] = ["Images/dynasty/dyansty-banner16.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[16] = ["Images/dynasty/dyansty-banner17.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[17] = ["Images/dynasty/dyansty-banner18.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[18] = ["Images/dynasty/dyansty-banner19.jpg", "products.aspx?cid=27", "_self","Dynasty"] //plain image syntax dynasty[19] = ["Images/dynasty/dyansty-banner20.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[20] = ["Images/dynasty/dyansty-banner21.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[21] = ["Images/dynasty/dyansty-banner22.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[22] = ["Images/dynasty/dyansty-banner23.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[23] = ["Images/dynasty/dyansty-banner24.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[24] = ["Images/dynasty/dyansty-banner25.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[25] = ["Images/dynasty/dyansty-banner26.jpg", "products.aspx?cid=27","_self", "Dynasty"] //plain image syntax dynasty[26] = ["Images/dynasty/dyansty-banner27.jpg", "products.aspx?cid=27", "_self","Dynasty"] //plain image syntax var fadeSlideShow_descpanel={ controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images fontStyle: 'normal 11px Verdana', //font style for text descriptions slidespeed: 600 //speed of description panel animation (in millisec) } //No need to edit beyond here... //jQuery.noConflict() function fadeSlideShow(settingarg){ this.setting=settingarg settingarg=null var setting=this.setting setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500 setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0 setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only) setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0) setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide) setting.oninit=setting.oninit || function(){} setting.onslide=setting.onslide || function(){} if (setting.displaymode.randomize) //randomly shuffle order of images? setting.imagearray.sort(function() {return 0.5 - Math.random()}) var preloadimages=[] //preload images setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains "" for (var i=0; isetting.longestdesc.length) setting.longestdesc=setting.imagearray[i][3] } var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always" setting.closebutton=(setting.descreveal=="always")? '' : '' var slideshow=this jQuery(document).ready(function($){ //fire on DOM ready var setting=slideshow.setting var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.") return } setting.$gallerylayers=$('
') //two stacked DIVs to display the actual slide .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'}) .appendTo(setting.$wrapperdiv) var $loadingimg=$('') .css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif .appendTo(setting.$wrapperdiv) var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled fadeSlideShow.routines.adddescpanel($, setting) if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight}) setting.$descinner.click(function(e){ //asign click behavior to "close" icon if (e.target.className=="close"){ slideshow.showhidedescpanel('hide') } }) setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon slideshow.showhidedescpanel('show') $(this).css({visibility:'hidden'}) }) } else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover) setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')}) setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')}) } } setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false}) if ($curimage.get(0).complete){ //accounf for IE not firing image.onload $loadingimg.hide() slideshow.paginateinit($) slideshow.showslide(setting.curimage) } else{ //initialize slideshow when first image has fully loaded $loadingimg.hide() slideshow.paginateinit($) $curimage.bind('load', function(){slideshow.showslide(setting.curimage)}) } setting.oninit.call(slideshow) //trigger oninit() event $(window).bind('unload', function(){ //clean up and persist if (slideshow.setting.persist) //remember last shown image's index fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage) jQuery.each(slideshow.setting, function(k){ if (slideshow.setting[k] instanceof Array){ for (var i=0; i0? setting.curimage-1 : totalimages-1) : Math.min(keyword, totalimages-1) var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image $slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0] 0 && imgdimensions[0] < setting.dimensions[0]) ? imgdimensions[0] - setting.dimensions[0] / 2 : 0 }) $slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]