Results 1 to 3 of 3

Thread: using this script as a layout

  1. #1
    Join Date
    May 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default using this script as a layout

    1) Script Title: Background Image Carousel

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

    3) Describe problem:

    Hello everyone! My page is at: http://tinyurl.com/8564kte I am not sure if anyone can help me with this but I thought I might ask. I wanted to use this script as a layout as seen in the page but I am wondering I anything can be included besides words or images. For example if I wanted to add interactive content on each of the slides. Or if I might need to get rid of the slide layout and do a basic navigation website, or if maybe a different type of script would be better for what I am trying to do. I am having a hard time explaining this so if you have any questions I'll try to clarify. But basically I want to know if this carousel slide can be used as my layout and add things beside images or text. Thanks.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    you could define the content in the html

    Code:
    	<div id="mybgcarousel" class="bgcarousel">
    
             <div class="slide" style="background-image:url(http://jandcinternetworks.com/images/contentbkg.jpg); position:absolute;left:100%;width:100%; height:100%;">
    		  <div class="desc" style="display:none">' + imgref[1] + '</div>
    		 </div>
    
             <div class="slide" style="background-image:url(http://jandcinternetworks.com/images/contentbkg.jpg); position:absolute;left:100%;width:100%; height:100%;">
    		  <div class="desc" style="display:none">' + imgref[2] + '</div>
    		 </div>
    
             <div class="slide" style="background-image:url(http://jandcinternetworks.com/images/contentbkg.jpg); position:absolute;left:100%;width:100%; height:100%;">
    		  <div class="desc" style="display:none">' + imgref[3] + '</div>
    		 </div>
    
            </div>
    
     	</div>
    and comment out this line in red
    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)
    		})
    		$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)
    		}
    	}
    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
    May 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I think that's going to be perfect. 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
  •