Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Script clash help

    Hello, I am new this forum and fairly new to web design.

    I am currently having trouble getting two different slideshow galleries to work on the same page on my website.

    Here is the website..
    http://www.atlanticcaravans.com.au/website/home.html

    Here is the code of the slideshow which I have on all my pages(which you can see on the website I posted above)..

    Code:
    <script type="text/javascript">
    
    $(document).ready(function() {		
    	
    	//Execute the slideShow
    	slideShow();
    
    });
    
    function slideShow() {
    
    	//Set the opacity of all images to 0
    	$('#gallery a').css({opacity: 0.0});
    	
    	//Get the first image and display it (set it to full opacity)
    	$('#gallery a:first').css({opacity: 1.0});
    	
    	//Set the caption background to semi-transparent
    	$('#gallery .caption').css({opacity: 0.7});
    
    	//Resize the width of the caption according to the image width
    	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
    	
    	//Get the caption of the first image from REL attribute and display it
    	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    	.animate({opacity: 0.7}, 400);
    	
    	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    	setInterval('gallery()',3000);
    	
    }
    
    function gallery() {
    	
    	//if no IMGs have the show class, grab the first image
    	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
    
    	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
    	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
    	
    	//Get next image caption
    	var caption = next.find('img').attr('rel');	
    	
    	//Set the fade in effect for the next image, show class has higher z-index
    	next.css({opacity: 0.0})
    	.addClass('show')
    	.animate({opacity: 1.0}, 1000);
    
    	//Hide the current image
    	current.animate({opacity: 0.0}, 1000)
    	.removeClass('show');
    	
    	//Set the opacity to 0 and height to 1px
    	$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:400 });	
    	
    	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    	$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
    	
    	//Display the content
    	$('#gallery .content').html(caption);
    	
    	
    }
    
    </script>

  • #2
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The other slideshow gallery has a couple of scripts but I narrowed down the conflict to this one. When this script is active the slideshow(which I use on every page) doesn't work but when I remove this script the slideshow I have on all my pages works but the second gallery I am adding dis-functions.


    var TINY={};function $(i){return document.getElementById(i)}function $$(e,p){p=p||document;return p.getElementsByTagName(e)}TINY.slideshow=function(n){this.infoSpeed=this.imgSpeed=this.speed=10;this .thumbOpacity=this.navHover=70;this.navOpacity=25;this.scrollSpeed=5;this.letterbox='#000';this.n=n; this.c=0;this.a=[]};TINY.slideshow.prototype={init:function(s,z,b,f,q){s=$(s);var m=$$('li',s),i=0,w=0;this.l=m.length;this.q=$(q);this.f=$(z);this.r=$(this.info);this.o=parseInt(TIN Y.style.val(z,'width'));if(this.thumbs){var u=$(this.left),r=$(this.right);u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');this.p=$(this.thumbs)}for(i;i <this.l;i++){this.a[i]={};var h=m[i],a=this.a[i];a.t=$$('h3',h)[0].innerHTML;a.d=$$('p',h)[0].innerHTML;a.l=$$('a',h)[0]?$$('a',h)[0].href:'';a.p=$$('span',h)[0].innerHTML;if(this.thumbs){var g=$$('img',h)[0];this.p.appendChild(g);w+=parseInt(g.offsetWidth);if(i!=this.l-1){g.style.marginRight=this.spacing+'px';w+=this.spacing}this.p.style.width=w+'px';g.style.opacity=t his.thumbOpacity/100;g.style.filter='alpha(opacity='+this.thumbOpacity+')';g.onmouseover=new Function('TINY.alpha.set(this,100,5)');g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');g.onclick=new Function(this.n+'.pr('+i+',1)')}}if(b&&f){b=$(b);f=$(f);b.style.opacity=f.style.opacity=this.navOpac ity/100;b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';b.onmouseover=f.onmouseover=n ew Function('TINY.alpha.set(this,'+this.navHover+',5)');b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');b.onclick=new Function(this.n+'.mv(-1,1)');f.onclick=new Function(this.n+'.mv(1,1)')}this.auto?this.is(0,0):this.is(0,1)},mv:function(d,c){var t=this.c+d;this.c=t=t<0?this.l-1:t>this.l-1?0:t;this.pr(t,c)},pr:function(t,c){clearTimeout(this.lt);if(c){clearTimeout(this.at)}this.c=t;this .is(t,c)},is:function(s,c){if(this.info){TINY.height.set(this.r,1,this.infoSpeed/2,-1)}var i=new Image();i.style.opacity=0;i.style.filter='alpha(opacity=0)';this.i=i;i.onload=new Function(this.n+'.le('+s+','+c+')');i.src=this.a[s].p;if(this.thumbs){var a=$$('img',this.p),l=a.length,x=0;for(x;x<l;x++){a[x].style.borderColor=x!=s?'':this.active}}},le:function(s,c){this.f.appendChild(this.i);var w=this.o-parseInt(this.i.offsetWidth);if(w>0){var l=Math.floor(w/2);this.i.style.borderLeft=l+'px solid '+this.letterbox;this.i.style.borderRight=(w-l)+'px solid '+this.letterbox}TINY.alpha.set(this.i,100,this.imgSpeed);var n=new Function(this.n+'.nf('+s+')');this.lt=setTimeout(n,this.imgSpeed*100);if(!c){this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)}if(this.a[s].l!=''){this.q.onclick=new Function('window.location="'+this.a[s].l+'"');this.q.onmouseover=new Function('this.className="'+this.link+'"');this.q.onmouseout=new Function('this.className=""');this.q.style.cursor='pointer'}else{this.q.onclick=this.q.onmouseover=n ull;this.q.style.cursor='default'}var m=$$('img',this.f);if(m.length>2){this.f.removeChild(m[0])}},nf:function(s){if(this.info){s=this.a[s];$$('h3',this.r)[0].innerHTML=s.t;$$('p',this.r)[0].innerHTML=s.d;this.r.style.height='auto';var h=parseInt(this.r.offsetHeight);this.r.style.height=0;TINY.height.set(this.r,h,this.infoSpeed,0)}}}; TINY.scroll=function(){return{init:function(e,d,s){e=typeof e=='object'?e:$(e);var p=e.style.left||TINY.style.val(e,'left');e.style.left=p;var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0;e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)},mv:fu nction(e,l,d,s){var c=parseInt(e.style.left);if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c);i=i<s?i:s;var n=c-i*d;e.style.left=n+'px'}},cl:function(e){e=typeof e=='object'?e:$(e);clearInterval(e.si)}}}();TINY.height=function(){return{set:function(e,h,s,d){e=ty peof e=='object'?e:$(e);var oh=e.offsetHeight,ho=e.style.height||TINY.style.val(e,'height');ho=oh-parseInt(ho);var hd=oh-ho>h?-1:1;clearInterval(e.si);e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)},tw:function(e, h,ho,hd,s){var oh=e.offsetHeight-ho;if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}}}}();TINY.alpha=function(){return{set:function(e,a,s){e=typeof e=='object'?e:$(e);var o=e.style.opacity||TINY.style.val(e,'opacity'),d=a>o*100?1:-1;e.style.opacity=o;clearInterval(e.ai);e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)},tw: function(e,a,d,s){var o=Math.round(e.style.opacity*100);if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d;e.style.opacity=n/100;e.style.filter='alpha(opacity='+n+')'}}}}();TINY.style=function(){return{val:function(e,p){e=typ eof e=='object'?e:$(e);return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();


    Help will be much appreciated. Thanks

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by vozduk View Post
    I am currently having trouble getting two different slideshow galleries to work on the same page on my website.
    Yes, this is a very common problem, as you could have discovered by using the search feature of the forum. Are you trying to use two different Javascript framewotrks? In most cases there is no solution, I am afraid. I don't think many people will have the time or the inclination to wade through the convoluted code in Post #2. Try a different slideshow gallery. Have a look at the many excellent scripts at http://www.vicsjavascripts.org.uk/

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 03-22-2012 at 04:57 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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