Results 1 to 3 of 3

Thread: Text under background carousel image

  1. #1
    Join Date
    Feb 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Text under background carousel image

    1) Script Title:

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


    3) Describe problem: Not a problem but a wish! It would be great if the array could be extended to include a hyperlink for the image (already requested in a different thread) AND text that can be placed under the image.

    Thanks!

    Jeff

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    new and modified function;

    Code:
     
    	slide:function(nextslide, dir){ //possible values for dir: "left", "right", "top", or "down"
    		if (this.curslide==nextslide)
    			return
    		var slider=this, setting=this.setting
    		var createobj=bgCarousel.routines.createobj
    		var nextslide_initialpos=setting.dimensions[(dir=="right"||dir=="left")? 0 : 1] * ((dir=="right"||dir=="down")? -1 : 1)
    		var curslide_finalpos=-nextslide_initialpos
    		var posprop=this.posprop
    		if (this.animation_isrunning!=null)
    			this.animation_isrunning=true //indicate animation is running
    		this.$imageslides.eq(nextslide).show().css(createobj([posprop, nextslide_initialpos], ['opacity', 0.5])) //show upcoming slide
    			.stop().animate(createobj([posprop, 0]), setting.slideduration, function(){
    				var $this=jQuery(this)
    				$this.addClass(setting.activeslideclass).animate({opacity:1})
    				.find('div.desc').stop().slideDown()
    				slider.animation_isrunning=false
    			})
    			.find('div.desc').hide()
    
    		this.$imageslides.eq(this.curslide)
    			.removeClass(setting.activeslideclass)
    			.stop().animate(createobj([posprop, curslide_finalpos]), setting.slideduration, function(){
    					var $this=jQuery(this)
    					$this.hide()
    			}) //hide outgoing slide
    		this.curslide=nextslide;
            this.text();
    	},
    
    
    
    bycls:function (nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     },
    
     link:function(url){
      if (url){
       window.location=url;
      }
     },
    
     text:function(){
    		var setting=this.setting
                if (document.getElementById(setting.textdiv)){
                 document.getElementById(setting.textdiv).innerHTML=setting.imagearray[this.curslide][3]||'';
                }
     },
    
    
    	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)
            var slides=this.bycls('slide',document.getElementById(setting.wrapperid));
            for (var z0=0;z0<slides.length;z0++){
             this.addevt(slides[z0],'mouseup','link',setting.imagearray[z0][2]);
            }
    		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)
    		})
            this.text();
    		$controls.appendTo(this.$wrapperdiv)
    		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)
    		}
    	}
    and

    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>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.','http://www.vicsjavascripts.org.uk/','Slide 0'], //["image_path", "optional description","link"]
    		['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.','http://www.vicsjavascripts.org.uk/','Slide 1'],
    		['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.','http://www.vicsjavascripts.org.uk/','Slide 2'],
    		['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg', 'Alone and Lonliness- Peace and Inner Struggle','http://www.vicsjavascripts.org.uk/','Slide 3'] //<--no trailing comma after very last image element!
    	],
        textdiv:'textDIV',
    	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
    	navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
    	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: 500 //transition duration (milliseconds)
    })
    html

    Code:
    <div id="mybgcarousel" class="bgcarousel"></div>
    <div id="textDIV" ></div>
    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. #3
    Join Date
    Feb 2006
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Works great! Thank you!

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
  •