creating multiple instances of carousels

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

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>
   

Select allOpen 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>

ya it does work thanks for your help

thanks