Results 1 to 3 of 3

Thread: How do I remove nav buttons on Background Image Carousel?

  1. #1
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How do I remove nav buttons on Background Image Carousel?

    1) Script Title: Backgroud Image Carousel

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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)
    })
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    motonetVLC (03-05-2013)

  4. #3
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I have just implemented the correction and works great. Buttons revomed. Thank you very much for your answer Vic

Similar Threads

  1. Replies: 3
    Last Post: 12-30-2012, 02:58 PM
  2. Background Image Carousel won't load stuck on black background
    By accessotronik in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-15-2012, 02:23 PM
  3. background image carousel
    By akluch2 in forum JavaScript
    Replies: 1
    Last Post: 08-07-2012, 11:07 PM
  4. Background Image Carousel
    By WillyBear in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-26-2012, 07:44 PM
  5. Background Image Carousel background-size: cover; is not working
    By kerriluo in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-12-2012, 09:38 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •