Code:
init:function($, slidesHTML){
var slideshow=this, setting=this.setting
this.$wrapperdiv=$('#'+setting.wrapperid)
setting.dimensions=[this.$wrapperdiv.width(), this.$wrapperdiv.height()]
this.$wrapperdiv.css({position:'relative', visibility:'visible', overflow:'hidden', backgroundImage:'none', width:setting.dimensions[0], height:setting.dimensions[1]}) //main DIV
if (this.$wrapperdiv.length==0){ //if no wrapper DIV found
//alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
//return
}
this.$wrapperdiv.html(slidesHTML)
this.$imageslides=this.$wrapperdiv.find('div.slide').hide()
this.$imageslides.eq(this.curslide).show()
.css(bgCarousel.routines.createobj(['opacity', 0.5], [this.posprop, 0])) //set current slide's CSS position (either "left" or "top") to 0
.addClass(setting.activeslideclass)
.stop().animate({opacity:1})
.find('div.desc').slideDown()
var orientation=setting.orientation
var controlpaths=(orientation=="h")? setting.navbuttons.slice(0, 2) : setting.navbuttons.slice(2)
var $controls = $('<img class="navbutton" src="'+controlpaths[1]+'" data-dir="forth" style="position:absolute; z-index:5; cursor:pointer; ' + (orientation=='v'? 'bottom:0; left:46%' : 'top:46%; right:0;') + '" />'
+ '<img class="navbutton" src="'+controlpaths[0]+'" data-dir="back" style="position:absolute; z-index:5; cursor:pointer; ' + (orientation=='v'? 'top:0; left:45%' : 'top:45%; left:0;') + '" />'
)
.click(function(){
var keyword = this.getAttribute('data-dir')
setting.curslide = (keyword == "right")? (setting.curslide == setting.content.length-1? 0 : setting.curslide + 1)
: (setting.curslide == 0? setting.content.length-1 : setting.curslide - 1)
slideshow.navigate(keyword)
})
setting.navbuttons.length>0?$controls.appendTo(this.$wrapperdiv):null;
var curslide = this.curslide
if (setting.linkarray && setting.linkarray[curslide]){
this.$imageslides.eq(curslide).css({cursor:'pointer'}).on('click.goto', function(){
window.location = setting.linkarray[curslide]
})
}
if (setting.displaymode.type=="auto"){ //auto slide mode?
setting.displaymode.pause+=setting.slideduration
this.maxsteps=setting.displaymode.cycles * this.$imageslides.length
if (setting.displaymode.pauseonmouseover){
this.$wrapperdiv.mouseenter(function(){slideshow.ismouseover=true})
this.$wrapperdiv.mouseleave(function(){slideshow.ismouseover=false})
}
this.rotatetimer=setTimeout(function(){slideshow.rotate()}, setting.displaymode.pause)
}
}
Code:
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', '<h2>Diferente</h2>Un trending topic.'], //["image_path", "optional description"]
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', '<h2>Sofisticado</h2>Los detalles hablan por si mismos.'],
// ['http://s425456527.mialojamiento.es/images/full/motogadget/motog2.jpg', '<h2>Unico</h2>Para aquellos que entienden.'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', '<h2>Arte?</h2>Una imagen... mil palabras.'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', '<h2>Fascinante</h2>A veces lo simple es efectivo.']
,
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', '<h2>Minimalista</h2>El enfasis en lo relevante'] //<--no trailing comma after very last image element!
],
linkarray: [
'/shopdisplaycategories.asp',
'/shopdisplaycategories.asp',
'/shopdisplaycategories.asp',
'/shopdisplaycategories.asp'
],
displaymode: {type:'auto', pause:3000, cycles:0, stoponclick:true, pauseonmouseover:true},
navbuttons:[], // path to nav images, [] = no nav buttons
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 800 //transition duration (milliseconds)
})
Bookmarks