Results 1 to 2 of 2

Thread: Multiple horizontal scroller in one page? (script issue)

  1. #1
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Multiple horizontal scroller in one page? (script issue)

    Alright, I have a little issue here, I'm not an expert so I need your help.

    I have a code for an horizontal scroller (in fact I used the scroller from here: http://coolcarousels.frebsite.nl/c/28/) and I want to integrate it multiple times, here's what it looks like so far:
    Click image for larger version. 

Name:	scroller.jpg 
Views:	272 
Size:	9.6 KB 
ID:	5050

    Basically I want to put the scroller multiple times inside the page, where the red rectangles are. I know that changing the Id for each scroller is one step of the solution, the scroller uses a style sheet and a Js file. I am not an expert so I need someone to clear this up for me.

    First, here is the Javascript, called "scroller.js" :

    Code:
    $(function() {
    	
    	$('#carousel span').append('<img src="scroller/carousel_glare.png" class="glare" />');
    	$('#thumbs a').append('<img src="scroller/carousel_glare_small.png" class="glare" />');
     
    
     
    	$('#thumbs').carouFredSel({
    		responsive: true,
    		circular: false,
    		infinite: false,
    		auto: false,
    		prev: '#prev',
    		next: '#next',
    		items: {
    			visible: {
    				min: 2,
    				max: 4
    			},
    			width: '155',
    			height: 282
    		}
    		
    	});
    	
     
    	$('#thumbs a').click(function() {
    		$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
    		$('#thumbs a').removeClass('selected');
    		$(this).addClass('selected');
    		return false;
    	});
    	
    
    });
    Now here is the CSS:

    Code:
    html, body {
    	height: 100%;
    	padding: 0;
    	margin: 0;
    }
    body {
    	background: url('bg_glare.png') top center no-repeat;
    }
    html > body {
    	min-height: 600px;
    }
    body * {
    	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    	font-size: 14px;
    	color: #333;
    	line-height: 22px;
    }
     
    #wrapper {
    	position: absolute;
    	width: 50%;
    	left: 25%;
    	top: 50px;
    }
    #carousel-wrapper {
    	padding-bottom: 10px;
    	position: relative;
    }
    #carousel, #thumbs {
    	overflow: hidden;
    }
    #carousel-wrapper .caroufredsel_wrapper {
    	border-radius: 10px;
    	box-shadow: 0 0 5px #899;
    
    }
     
    #carousel span, #carousel img,
    #thumbs a, #thumbs img  {
    	display: block;
    	float: left;
            height: 262px;
    
    }
    #carousel span, #carousel a,
    #thumbs span, #thumbs a {
    	position: relative;
    
    }
    #carousel img,
    #thumbs img {
    	border: none;
    	height: 262px;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    #carousel img.glare,
    #thumbs img.glare {
    	width: 100%;
    	height: auto;
    }
     
    #carousel span {
    	width: 554px;
    	height: 313px;
    }
     
    #thumbs-wrapper {
    	padding: 20px 0px;
    	position: relative;
            width: 780px;
    }
    #thumbs a {
    	border: 2px solid #899;
    	height: 262px;
            width: 175px;
    	margin: 0 10px;
    	overflow: hidden;
    	border-radius: 10px;float: left;
    	
    	-webkit-transition: border-color .5s;
    	-moz-transition: border-color .5s;
    	-ms-transition: border-color .5s;
    	transition: border-color .5s;
    }
    #thumbs a:hover, #thumbs a.selected {
    	border-color: #566;
    }
     
    #wrapper img#shadow {
    	width: 100%;
    	position: absolute;
    	bottom: 0;
    }
     
    #prev, #next {
    	background: transparent url('carousel_nav.png') no-repeat 0 0;
    	display: block;
    	width: 53px;
    	height: 120px;
    	margin-top: -70px;
    	position: absolute;
    	top: 50%;
    }
    #prev {
    	background-position: 0 0;
    	left: -20px;
    }
    #next {
    	background-position: -53px 0;
    	right: -20px;
    }			
    #prev:hover { 
    	background-position: 0 -120px;				
    }
    #next:hover {
    	background-position: -53px -120px;				
    }
    #prev.disabled, #next.disabled {
    	display: none !important;
    }

    And finally, the HTML code:

    Code:
    <div id="thumbs-wrapper">
    		<div id="thumbs">
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" alt="Defiance" /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png"  /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
    			<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
    		</div>
    		<a id="prev" href="#"></a>
    		<a id="next" href="#"></a>
    	</div>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,132
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    You need unique ids for each thing that's addressed by its id. Or you could rewrite the script to use class for some things.

    Basically, what you have there is a simple script that's more or less one dimensional, meant for a single use on a page. To use it more than once, you can either make another copy of it, its styles and its markup only using a different set of id's, say add a 2 to the end of each id, Or rewrite it to use the id's that you feed it, using class instead of id wherever possible to save duplication - from the looks of it, that would be in the css and markup. The script would likely still need unique id's for it's functions.

    Or, you could find a script that already does all that. Something like:

    http://www.dynamicdrive.com/dynamici...epcarousel.htm

    or:

    http://dev7studios.com/nivo-slider/

    There are many others.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Horizontal Accordion script issue
    By shaimaik in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-24-2010, 11:56 PM
  2. Horizontal page scroller (again)
    By rhiaro in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 06-04-2008, 05:46 PM
  3. side scrolling horizontal image gallery (multiple instances on a page) wanted
    By mpiedlourde in forum Looking for such a script or service
    Replies: 1
    Last Post: 03-12-2008, 04:29 PM
  4. RSS Pausing Scroller Script - Horizontal Scrolling?.
    By corrupted in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-14-2006, 01:59 PM
  5. Adapting the 'Page Scroller' script to horizontal scrolling
    By nilux in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-28-2005, 08:43 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
  •