PDA

View Full Version : How do I remove nav buttons on Background Image Carousel?



motonetVLC
03-01-2013, 02:54 PM
1) Script Title: Backgroud Image Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm

3) Describe problem: First of all, this is my first post, but a use to come here since a long time, and I want to thank to those that make this site possible and invest their time on make good scripts, answer questions the people like me, etc From your work and your answers I have lernt and Im still learning new things. I think you do a great job.

My problem(s)

I ve been trying to remove the arrows (navigation buttons) on Background Image Carousel, but I only have been capable of hide them on FF and Chrome, but they are still apearing in IE. Please help me..!

On the other hand, I am having problems in IE8 under Windows XP. I am using for the widht % instead of px and again it works on FF & Chrome correctly even in IE9 under Windows 7, but not in IE8

The same with the the cover style for background-size (in css). in IE8 does not work and shows the original image size.

Presently I have a test site in http://s425456527.mialojamiento.es/ (The dimensions of the images are not the final ones but as I said I am testing.

Thans in advance
Muchas gracias
Diego

vwphillips
03-02-2013, 03:49 PM
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)
}
}



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)
})

motonetVLC
03-05-2013, 11:46 PM
I have just implemented the correction and works great. Buttons revomed. Thank you very much for your answer Vic