PDA

View Full Version : Resolved Problem with the last panel (Step Carousel 1.9)



hdmusicvideos
03-09-2013, 02:22 PM
1) Script Title: Step Carousel Viewer v1.9

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem: I can't disable the blank panel at the end of the rotation list.

My current settings in css:


.stepcarousel{
width: 700px; /*Width of Carousel Viewer itself*/
height: 140px; /*Height should enough to fit largest content's height*/

.stepcarousel .panel{
margin: 0px 5px 0px 0px; /*margin around each panel*/ (margin-right 5px)
width: 230px; /*Width of each panel holding each content.

Website using this script: http://www.hdmusicvideos.info

Is there a way to keep the (margin-right 5px) without the blank panel at the end ? if I set margin: 0px 0px 0px 0px; /*margin around each panel*/ then is no blank panel at the end... but I need spaces between the panels)

Thanks for reading.

vwphillips
03-09-2013, 05:07 PM
alignpanels:function($, config){
var paneloffset=0
var i=0
config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)
config.panelwidths=[] //array to store widths of each panel
config.$panels.each(function(index){ //loop through panels
var $currentpanel=$(this)
$currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'}) //position panel
$currentpanel.bind('click', function(e){return config.onpanelclick(e.target)}) //bind onpanelclick() to onclick event
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate next panel offset
config.paneloffsets.push(paneloffset) //remember this offset
config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]) //remember panel width
if (-(parseInt($currentpanel.get(0).offsetLeft)+parseInt($currentpanel.get(0).offsetWidth))+config.$gallery.get(0).offsetWidth+parseInt(config.$gallery.css('width'))>0){
i++;
}
})
config.lastvisiblepanel=i-1 //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width
config.paneloffsets.pop() //delete last offset (redundant)
config.$belt.css({width: paneloffset+'px'}) //Set Belt DIV to total panels' widths
config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(config.galleryid+"persist")) : 0 //determine 1st panel to show by default
config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0
var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset)
config.$belt.css({left: -endpoint+'px'})
if (config.defaultbuttons.enable==true){ //if enable default back/forth nav buttons
var $navbuttons=this.addnavbuttons($, config, config.currentpanel)
$(window).bind("load resize", function(){ //refresh position of nav buttons when page loads/resizes, in case offsets weren't available document.oncontentload
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'})
config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'})
})
}
if (config.autostep && config.autostep.enable){ //enable auto stepping of Carousel?
var $carouselparts=config.$gallery.add(typeof $navbuttons!="undefined"? $navbuttons : null)
$carouselparts.bind('click', function(){
config.autostep.status="stopped"
stepcarousel.stopautostep(config)
})
$carouselparts.hover(function(){ //onMouseover
stepcarousel.stopautostep(config)
config.autostep.hoverstate="over"
}, function(){ //onMouseout
if (config.steptimer && config.autostep.hoverstate=="over" && config.autostep.status!="stopped"){
config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause)
config.autostep.hoverstate="out"
}
})
config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause) //automatically rotate Carousel Viewer
} //end enable auto stepping check
this.createpaginate($, config)
this.statusreport(config.galleryid)
config.oninit()
config.onslideaction(this)
},

hdmusicvideos
03-09-2013, 06:50 PM
Thanks... but what to do with that code ? Do I need to delete where is highlighted in red ?

hmmm... I will try to add this in stepcarousel.js

***Edit: Problem solved - added the code in stepcarousel.js file.