Link to home
Create AccountLog in
Avatar of mattibutt
mattibuttFlag for United States of America

asked on

creating multiple instances of carousels

hi
i am loading dynamically some data in the jcarousel i need to create multiple instances of the this object when i try to create multiple instances it doesnt work
i saw an example here but i wanna know how can i change my existing javascript code to create multiple instances
http://sorgalla.com/projects/jcarousel/examples/static_multiple.html
<script type="text/javascript">
 
  jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
		size: {/literal}10{literal}
	});
  });
  
  
  </script>
 
//html smarty codes
	<div id="ajaxcontentarea" class="contentstyle">
				
				<div id="tabs_related" class="tabcontent">
                       
		<ul id="mycarousel" class="jcarousel-skin-phpmelody">
			{$show_more_related}
	
		   </ul>
				</div>
				
                <div id="tabs_relateds" class="tabcontent">
                <ul id="mycarousel" class="jcarousel-skin">
				{$show_more_race}
                  </ul>
				</div>

Open in new window

Avatar of mattibutt
mattibutt
Flag of United States of America image

ASKER

when i try to create multiple instances i get the error message attached as a image this is how i created two more instances
  {literal}
<script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarousels').jcarousel({
            size: '10'
      });
  });
  </script>
  {/literal}
    {literal}
<script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarouselss').jcarousel({
            size: {/literal}10{literal}
      });
  });
  </script>
  {/literal}
jcoursal.JPG
Avatar of amit_g
You can have just one script

<script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
                size: 10
        });
  });
  </script>

and it would make multiple carousel - one for each #mycarousel in your HTML content. So just have multiple

<ul id="mycarousel"

and single instance of jquery.
hi
i have tried that but it didn't work i don't know why now i have created two instances and it works i am just testing
i have changed the following codes
|loop|infinite|an|cause|will|This|items|set|No|jCarousel|alert|
to this
loop|infinite|an|cause|will|This|items|set|No|jCarousel|isNaN
Show the rendered code (the view source). If it is available online, that would make it much easier to troubleshoot.
i am working on local computer so its not available online i have put three instances of jquery it seems to be working but i dont know fully the way it is behaving right now this is how i created three more instances and each class is applied to dynamic content

 <script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarousels').jcarousel({
            size: {/literal}30
      });
  });
  </script>
     {literal}
  <script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarouselt').jcarousel({
            size: {/literal}30
      });
  });
  </script>

   {literal}
  <script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarousely').jcarousel({
            size: {/literal}30
      });
  });
  </script>

I don't think three instances are needed. Those must be redundant and just one would work as well.
i agree with you but since i am trying to embed inside another application its causing more problem now the trouble is when i click on arrow the thumbnails inside the box go down and their locations change very strange
hi
i am still stuck with the format of the objects basically i am able to put multiple intances and it works fine trouble is the carousels resize for different divs which is kind of frustrating i dont see anything different please advice what can i do to make the box fix where object loads
Can you show us what is happening? If you have it on the net that would speed the troubleshooting a lot.
hi
as you can see from the attached images the first tab appears fine but the second tab appear quite weird and it doesnt show the thumbnails in that
there is another problem when page load for the first time all the hidden thumbnails are shown briefly like say for a second until javascript is executed
//javascript codes.
$(document).ready( function () {
	$("#tabs_sameartist").hide();
	$("#tabs_other").hide();
	$("#tabs_relateds").hide();
	$("#tabs_related").show();
	
	
	$("#tabs_select_relateds").click( function() {
		
		 var vid = $(this).find('a').attr('class');
		 var divs = $("#tabs_related").children().length;
		 
		 $(".shadetabs").find("li").removeClass("selected");
		 $(this).addClass("selected");	 
	$("#tabs_related").hide();
		 $("#tabs_sameartist").hide();
		 $("#tabs_other").hide();
		 
		 if (vid.length > 0 && divs == 0)
		 {
		 	ajax_request('detail', 'do=show_more_race&vid='+ vid, '#tabs_relateds', 'html', false);
		 }
		 
		 if($.browser.msie) {
			$("#tabs_relateds").show();
		 }
		 else
		 {
			$("#tabs_relateds").fadeIn(200);
		 }
		 return false;
	});
	
	$("#tabs_select_related").click( function() {
		
		 var vid = $(this).find('a').attr('class');
		 var divs = $("#tabs_related").children().length;
		 
		 $(".shadetabs").find("li").removeClass("selected");
		 $(this).addClass("selected");	 
	
		 $("#tabs_sameartist").hide();
		 $("#tabs_other").hide();
		 	$("#tabs_relateds").hide();
		 
		 if (vid.length > 0 && divs == 0)
		 {
		 	ajax_request('detail', 'do=show_more_related&vid='+ vid, '#tabs_related', 'html', false);
		 }
		 
		 if($.browser.msie) {
			$("#tabs_related").show();
		 }
		 else
		 {
			$("#tabs_related").fadeIn(200);
		 }
		 return false;
	});
 
	$("#tabs_select_sameartist").click( function() {
		 
		 var vid = $(this).find('a').attr('class');
		 var divs = $("#tabs_sameartist").children().length;
		 
		 $(".shadetabs").find("li").removeClass("selected");
		 $(this).addClass("selected");
		 
		 $("#tabs_related").hide();
		 $("#tabs_other").hide();
		 $("#tabs_relateds").hide();
		 if (vid.length > 0 && divs == 0)
		 {
		 	ajax_request('detail', 'do=show_more_artist&vid='+ vid, '#tabs_sameartist', 'html', false);
		 }
		 
		 if($.browser.msie) {
			 $("#tabs_sameartist").show();
		 }
		 else {
			 $("#tabs_sameartist").fadeIn(200);
		 }
		 return false;
	});
 
	$("#tabs_select_other").click( function() {
 
		 var vid = $(this).find('a').attr('class');
		 var divs = $("#tabs_other").children().length;
		 
 		 $(".shadetabs").find("li").removeClass("selected");
		 $(this).addClass("selected");
		 
		 if (vid.length > 0 && divs == 0)
		 {
		 	ajax_request('detail', 'do=show_more_best&vid='+ vid, '#tabs_other', 'html', false);
		 }
		 
		 $("#tabs_related").hide();
		 $("#tabs_sameartist").hide();
		 		 	$("#tabs_relateds").hide();
		 if($.browser.msie) {
			 $("#tabs_other").show();
		 }
		 else { 
			 $("#tabs_other").fadeIn(200);
		 }
		 return false;
	});
	
	$("#href_artist_name").click( function() {
		
		 var vid = $(this).attr('class');
		 var divs = $("#tabs_sameartist").children().length;
		 
		 $(".shadetabs").find("li").removeClass("selected");
		 $("#tabs_select_sameartist").addClass("selected");
		 
		 $("#tabs_related").hide();
		 $("#tabs_other").hide();
		$("#tabs_relateds").hide();
		 
		 if (vid.length > 0 && divs == 0)
		 {
		 	ajax_request('detail', 'do=show_more_artist&vid='+ vid, '#tabs_sameartist', 'html', false);
		 }
		 
		 if($.browser.msie) {
			 $("#tabs_sameartist").show();
		 }
		 else {
			 $("#tabs_sameartist").fadeIn(200);
		 }
		 return false;
	});
});
 
//smarty&html codes
  {literal}
  <script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
		
		size: {/literal}20{literal}
	});
  });
  </script>
  {/literal}
 
   {literal}
  <script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarousels').jcarousel({
		size: {/literal}20
	});
  });
  </script>
     {literal}
  <script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarouselt').jcarousel({
		size: {/literal}20
	});
  });
  </script>
 
   {literal}
  <script type="text/javascript">
  jQuery(document).ready(function() {
   jQuery('#mycarousely').jcarousel({
		size: {/literal}20
	});
  });
  </script>
 
<div id="detail_show_more">
			<div id="ajaxcontentarea" class="contentstyle">
				
				<div id="tabs_related" class="tabcontent">
                     <div id="playingnow">      
	  <ul id="mycarousel" class="jcarousel-skin-phpmelody">
			{$show_more_related}
	
		   </ul>
           </div>
				</div>
				
                <div id="tabs_relateds" class="tabcontent">
                    <div id="playingnow">  
                <ul id="mycarousels" class="jcarousel-skin-phpmelody">
				{$show_more_race}
                  </ul>
                  </div>
				</div>
				<div id="tabs_sameartist" class="tabcontent">
                  <div id="playingnow">
                <ul id="mycarouselt" class="jcarousel-skin-phpmelody">
				{$show_more_artist}
                </ul>
                </div>
             
				</div>
				
				<div id="tabs_other" class="tabcontent">
                  <div id="playingnow">
                <ul id="mycarousely" class="jcarousel-skin-phpmelody">
                {$show_more_best}
                </ul>
				</div>
				</div>
                
                
                
                
				
			</div>
	
		</div>
   

Open in new window

first-tab.JPG
second-tab.JPG
Can you put this on this on the net? You can create a test page and post that link if you don't want to put the whole page link here.
it seems to be sorted now i have one problem when the content is loading it is showing and it looks ugly i want a function to hide the main div and display after one second delay
$("#DivID").hide();
setTimeout("$('#DivID').show();",1000);
hi
thanks for your reply where do i put this code inside the javascript tags or do i need to create a new function?
It could go in the function $(document).ready( function ()
ok i will try this tomorrow how many seconds are they setTimeout("$('#DivID').show();",1000);? once i solve this i might have another question regarding the same issue but with your permission
setTimeout accepts delay in millisecs. So the above would be 1 sec delay.
i have done it like the following but it doesnt seem to work
<script type="text/javascript">
  jQuery(document).ready(function() {
  $("#detail_show_more").hide();
setTimeout("$('#detail_show_more').show();",1000);
      });

  </script>
ASKER CERTIFIED SOLUTION
Avatar of amit_g
amit_g
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
ya it does work thanks for your help
thanks