Forums

lukewilde

I am getting so annoyed with things which should be simple just not working for me, now that i have added an image slideshow to the page, the sidebar refuses to sit next to it on the right.

http://www.lsw-design.com/sgraphics3/study_trips.php

Any ideas?

jamy_za

Float .trips_content to the left.

.trips_content{float: left;}

lukewilde

Aha thanks, i tried floating the slideshows to the left, but completely forgot .trips_content.

lukewilde

Another strange problem, I need to have 4 image slide shows on the page so i just tried copying the script code which was working for the first slide show, and changing the id's in it for the new slide show, but for some reason the second works (Prague section) but nothing i do gets the first working again.

How should i go about getting the 4 working on the same page?

OniLinkCR

Need.The.Code.

Also I need a better explanation of the problem.

Cheers mate, and good looking design!

lukewilde

The code for the slider is:

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#london_img img').length){
        var indexImage = $('#london_img img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(350, function() {
                    myTimer = setTimeout("showNext()", 5000);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}
 
function showNext(){
    var len = $('#london_img img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
 
$(document).ready(function() {
    myTimer = setTimeout("showNext()", 5000);
    showNext(); //Load first image
    $('#thumbs li').bind('click',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count)-1);
    });
});

I have tried duplicating the code and changing the IDs to something else, but can't get it to work.

lukewilde

Can anyone help me with getting 4 working on the same page?

lukewilde

Is this not possible to do? i have asked on a few sites and had no one suggest how to do it.

virtual

Yes it is possible to load several sliders on the same page but not the way you have done it. In the following instance I was using the Coda Slider, so you would have to load the jquery and coda slider js files first then
You would need something like this

<!-- Initialize each slider on the page. Each slider must have a unique id -->
	<script type="text/javascript">
		jQuery(window).bind("load", function() {
			jQuery("div#slider1").codaSlider()
			 jQuery("div#slider2").codaSlider()
			 jQuery("div#slider3").codaSlider()
					});
	</script>

and in the Html put each slider in it's own div named like above

<div id="slider1">

lukewilde

Thanks for the suggestion, i have been trying it out. Does anyone know why the ULs with the tabs in is 292px wide? i have looked in the css and the js and i can't find anything making the width 292px and i can't get it to be any wider which i need to do.

Any ideas?

treehouse : what would you like to learn today?

Forums

Sidebar problem