jQuery slider is not working

Question

garyjohnson 14 Junior Poster

11 Years Ago

I have a website that has 2 jquery sliders. This webisite works perfectly fine with both of them. I then created another site with the same exact code for 2 jquery sliders and this site will only run one slider and I can't find the problem!

This is the html for the website that works

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Blake Photography</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="maincss.css" />
<style type="text/css">
/* New in version 1.7+ */ 
 #slider1 { 
  width: 400px; 
  height: 300px; 
  list-style: none; 
 } 
  #slider2 { 
  width: 170px; 
  height: 250px; 
  list-style: none; 

 } 
 /* CSS to expand the image to fit inside colorbox */ 
 #cboxPhoto { width: 100%; height: 100%; margin: 0 !important; } 
 /* Change metallic theme defaults to show thumbnails */ 
 div.anythingControls { 
  bottom: 25px; /* thumbnail images are larger than the original bullets; move it up */ 
} 
 .anythingSlider-metallic .thumbNav a { 
  background-image: url(); 
  height: 30px; 
  width: 30px; 
  border: #000 1px solid; 
  border-radius: 2px; 
  -moz-border-radius: 2px; 
  -webkit-border-radius: 2px; 
  text-indent: 0; 
 } 
 .anythingSlider-metallic .thumbNav a span { 
  visibility: visible; /* span changed to visibility hidden in v1.7.20 */ 
 } 
 /* border around link (image) to show current panel */ 
 .anythingSlider-metallic .thumbNav a:hover, 
 .anythingSlider-metallic .thumbNav a.cur { 
  border-color: #fff; 
 } 
 /* reposition the start/stop button */ 
 .anythingSlider-metallic .start-stop { 
  margin-top: 15px; 
 }
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 <!-- jQuery --> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 

 <!-- Anything Slider optional plugins --> 
 <script src="js/jquery.easing.1.2.js"></script> 

 <!-- Anything Slider --> 
 <link href="css/anythingslider.css" rel="stylesheet"> 
 <script src="js/jquery.anythingslider.min.js"></script> 

 <!-- ColorBox --> 
 <link href="demos/colorbox/colorbox.css" rel="stylesheet"> 
 <script src="demos/colorbox/jquery.colorbox-min.js"></script>

<script type="text/javascript">
/* First Java */
$(function(){ 
 $('#slider1') 
  .anythingSlider({ 
   toggleControls : false,
   buildNavigation     : false,
   buildArrows         : false,
   buildStartStop      : false,
   autoPlay            : true,
   resizeContents      : false,
   delay               : 3000,
   theme          : 'metallic', 
   navigationFormatter : function(i, panel){ // add thumbnails as navigation links 
    return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i - 1] + '.jpg">'; 
   } 
  }) 
  // target all images inside the current slider 
  // replace with 'img.someclass' to target specific images 
  .find('.panel:not(.cloned) img') // ignore the cloned panels 
   .attr('rel','group')            // add all slider images to a colorbox group 
   .colorbox({ 
     width: '90%', 
     height: '90%', 
     href: function(){ return $(this).attr('src'); }, 
     // use $(this).attr('title') for specific image captions 
     title: 'Press escape to close', 
     rel: 'group' 
   }); 
});
/*End First Java*/
/* First Java */
$(function(){ 
 $('#slider2') 
  .anythingSlider({ 
   toggleControls : false,
   buildNavigation     : false,
   buildArrows         : false,
   buildStartStop      : false,
   autoPlay            : true,
   resizeContents      : true, 
   delay               : 4000,
   theme          : 'metallic', 
   navigationFormatter : function(i, panel){ // add thumbnails as navigation links 
    return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i - 1] + '.jpg">'; 
   } 
  }) 
  // target all images inside the current slider 
  // replace with 'img.someclass' to target specific images 
  .find('.panel:not(.cloned) img') // ignore the cloned panels 
   .attr('rel','group')            // add all slider images to a colorbox group 
   .colorbox({ 
     width: '90%', 
     height: '90%', 
     href: function(){ return $(this).attr('src'); }, 
     // use $(this).attr('title') for specific image captions 
     title: 'Press escape to close', 
     rel: 'group' 
   }); 
});
/*End First Java*/

</script>




</head>

<body>
<div class="container">
  <header>
  </header>
  <div class="upper_content">
  <div class="header_picture">
  </div>
  <div class="holder">
    <ul id="slider1"> 
  <li class="panel1"><img class="fade" src="Photos/photo1.jpg" alt=""></li> 
  <li class="panel2"><img class="fade" src="photos/photo2.jpg" alt=""></li> 
  <li class="panel3"><img class="fade" src="photos/photo3.jpg" alt=""></li> 
  <li class="panel4"><img class="fade" src="photos/photo4.jpg" alt=""></li> 
  <li class="panel5"><img class="fade" src="photos/photo5.jpg" alt=""></li> 
 </ul>
   </div>
   </div>
  <div class="sidebar1">
    <nav>
      <ul>
        <li ><a href="index.php" class="sidetab">Home</a></li>
        <li ><a href="gallery.php" class="sidetab">Gallery</a></li>
        <li ><a href="contact.php" class="sidetab">Contact</a></li>
      </ul>
    </nav>
      <ul id="slider2"> 
  <li class="panel1"><img class="fade" src="Photos/Kayla/582776_10151013369148652_1373691007_n.png" width="167" height="250" alt=""></li> 
  <li class="panel2"><img class="fade" src="Photos/GaryJohnson/58856_10151115150443652_1737085081_n (1).png" width="167" height="250" alt=""></li> 
  <li class="panel3"><img class="fade" src="Photos/Austins/423228_10151204212203652_396789512_n.png" width="167" height="250" alt=""></li> 
  <li class="panel4"><img class="fade" src="Photos/Ware/423011_10151154454098652_671084847_n.png" width="167" height="250" alt=""></li>
 </ul>
  <!-- end .sidebar1 --></div>

  <article class="content">
   <div class="inner_box" id="inner_box_1">
   <div class="small_header_love"></div>
   <div class="picture_pos"><a href=""><img src="Photos/Ware/483556_10151154455183652_731601344_n.png" width="165" height="115"></a></div>
   <div class="inside_text">"Being deeply loved by someone gives you strength, while loving someone deeply gives you courage." - Lao Tzu</div>
   </div>
   <div class="inner_box" id="inner_box_2">
   <div class="small_header_laugh"></div>
   <div class="picture_pos"><a href=""><img src="Photos/Bella/Bella1.jpg" width="165" height="115"></a></div>
   <div class="inside_text">"The most wasted day of all is that on which we have not laughed." - Nicolas Chamfort</div>
   </div>
   <div class="inner_box" id="inner_box_3">
   <div class="small_header_live"></div>
   <div class="picture_pos"><a href=""><img src="Photos/Katie/250438_10151106002738652_398962344_n.png" width="165" height="115"></a></div>
   <div class="inside_text"><span style="font-style:italic">"Dream as if you'll live forever. Live as if you'll die today."</span> - James Dean</div>
   </div>
    <!-- end .content --></article>
  <footer>

    <address>
     Blake Photography(000-000-0000) - Wedding and Portrait photography
    </address>
  </footer>
  <!-- end .container --></div>
</body>
</html>

This is the Html for the website that doesnt work, it has the same javascript links and same java code but will only run the slider1 and not slider2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cakes by Stewart</title>
<link href="css/maincss.css" rel="stylesheet" type="text/css" />

<style type="text/css"> 
 #slider1 { 
  list-style: none; 
 }
 #slider4 { 
 list-style: none;
 } 
  /* CSS to expand the image to fit inside colorbox */ 
 #cboxPhoto { width: 100%; height: 100%; margin: 0 !important; } 
 /* Change metallic theme defaults to show thumbnails */ 
 div.anythingControls { 
  bottom: 25px; /* thumbnail images are larger than the original bullets; move it up */ 
} 
 .anythingSlider-metallic .thumbNav a { 
  background-image: url(); 
  height: 30px; 
  width: 30px; 
  border: #000 1px solid; 
  border-radius: 2px; 
  -moz-border-radius: 2px; 
  -webkit-border-radius: 2px; 
  text-indent: 0; 
 } 
 .anythingSlider-metallic .thumbNav a span { 
  visibility: visible; /* span changed to visibility hidden in v1.7.20 */ 
 } 
 /* border around link (image) to show current panel */ 
 .anythingSlider-metallic .thumbNav a:hover, 
 .anythingSlider-metallic .thumbNav a.cur { 
  border-color: #fff; 
 } 
 /* reposition the start/stop button */ 
 .anythingSlider-metallic .start-stop { 
  margin-top: 15px; 
 }
 </style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- jQuery --> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 

 <!-- Anything Slider optional plugins --> 
 <script src="js/jquery.easing.1.2.js"></script> 

 <!-- Anything Slider --> 
 <link href="css/anythingslider.css" rel="stylesheet"> 
 <script src="js/jquery.anythingslider.min.js"></script> 

 <!-- ColorBox --> 
 <link href="demos/colorbox/colorbox.css" rel="stylesheet"> 
 <script src="demos/colorbox/jquery.colorbox-min.js"></script>

<script type="text/javascript">
/* First Java */
$(function(){ 
 $('#slider1') 
  .anythingSlider({ 
   toggleControls : false,
   buildNavigation     : false,
   buildArrows         : false,
   buildStartStop      : false,
   autoPlay            : true,
   resizeContents      : false,
   delay               : 3000,
   theme          : 'metallic', 
   navigationFormatter : function(i, panel){ // add thumbnails as navigation links 
    return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i - 1] + '.jpg">'; 
   } 
  }) 
  // target all images inside the current slider 
  // replace with 'img.someclass' to target specific images 
  .find('.panel:not(.cloned) img') // ignore the cloned panels 
   .attr('rel','group')            // add all slider images to a colorbox group 
   .colorbox({ 
     width: '90%', 
     height: '90%', 
     href: function(){ return $(this).attr('src'); }, 
     // use $(this).attr('title') for specific image captions 
     title: 'Press escape to close', 
     rel: 'group' 
   }); 
});
/*End First Java*/
/* First Java */
$(function(){ 
 $('#slider4') 
  .anythingSlider({ 
   toggleControls : false,
   buildNavigation     : false,
   buildArrows         : false,
   buildStartStop      : false,
   autoPlay            : true,
   resizeContents      : true, 
   delay               : 4000,
   theme          : 'metallic', 
   navigationFormatter : function(i, panel){ // add thumbnails as navigation links 
    return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i - 1] + '.jpg">'; 
   } 
  }) 
  // target all images inside the current slider 
  // replace with 'img.someclass' to target specific images 
  .find('.panel:not(.cloned) img') // ignore the cloned panels 
   .attr('rel','group')            // add all slider images to a colorbox group 
   .colorbox({ 
     width: '90%', 
     height: '90%', 
     href: function(){ return $(this).attr('src'); }, 
     // use $(this).attr('title') for specific image captions 
     title: 'Press escape to close', 
     rel: 'group' 
   }); 
});
/*End Second Java*/
</script>

</head>

<body>

<div class="container">
  <div class="header">
  <!-- end .header --></div>
  <div class="top_nav_bar_pink">
  <div class="top_nav_bar_blue">
  <div class="top_nav_bar_gray">
  <div id="navcontainer">
<ul>
<li><a href="index.php" id="home_link">Home</a></li>
<li><a href="gallary.php" id="gallary_link">Gallary</a></li>
<li><a href="contact.php" id="contact_link">Contact Us</a></li>
</ul>
</div>
  <!--end top nav bar gray--></div>
  <!--end top nav bar blue--></div>
  <!--end top nav bar pink--></div>
  <div class="content">
  <div class="text_box1">
  <div class="text_box1_header">
  Cakes by Stewart
  </div>
  <div class="text_box1_text">
  Use GIF for simple Web graphics having limited colors. GIF files are always reduced to 256 unique colors or less and they make very small, fast-loading graphics for the Web. GIF is great for Web buttons, charts or diagrams, cartoon-like drawing, banners, and text headings. GIF is also used for small, compact Web animations. GIF should rarely be used for photos.
  <!--end text box1 text--></div>
  <!--end text_box1--></div>
  <div class="picture_box1">
   <ul id="slider1"> 
  <li class="panel1"><img class="fade" src="photos/kaylaweb.jpg" alt=""></li> 
  <li class="panel2"><img class="fade" src="photos/2012-08-04_16-06-30_862.jpg" alt=""></li> 
  <li class="panel3"><img class="fade" src="photos/fallchocweb.jpg" alt=""></li> 
  <li class="panel4"><img class="fade" src="photos/blanpurpwebcake2.jpg" alt=""></li> 
  <li class="panel5"><img class="fade" src="photos/brownscroll.jpg" alt=""></li> 
 </ul>
  <!--end picture_box1--></div>
  <div class="text_box2">
  <div class="text_box2_header">
  Products and Prices
  </div>
  <!--end text_box2--></div>
  <div class="picture_box2">
  <ul id="slider4"> 
  <li class="panel1"><img class="fade" src="photos/rosecupcake.jpg"  alt=""></li> 
  <li class="panel2"><img class="fade" src="photos/cak102.jpg" alt=""></li> 
 </ul>
  <!--end picture_box2--></div>
    <!-- end .content --></div>
  <div class="footer">
  Copyright © 2013 - Cakes by Stewart </br></br>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Thank you for trying to help!

javascript jquery

Edited 11 Years Ago by peter_budo because: jQuery is JavaScript not JSP (JavaServerPage) moving to JavaScript

2 Contributors
4 Replies
299 Views
1 Hour Discussion Span
Latest Post 11 Years Ago Latest Post by garyjohnson

pixelsoul 272 Red Pill

11 Years Ago

You don't by chance have this up online somewhere that we could see it, do you?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

garyjohnson 14 Junior Poster · Answer 1 · 2013-04-19T00:34:04+00:00

Noo I don't, that would be a lot easier I know.

pixelsoul 272 Red Pill Featured Poster · Answer 2 · 2013-04-19T00:44:34+00:00

I've stared at it and I am not seeing anything that jumps out at me as a problem. I am really tired though, so I may be missing something obvious. Heading to bed, but I will look at it later if no else has by then.

garyjohnson 14 Junior Poster · Answer 3 · 2013-04-19T01:07:30+00:00

garyjohnson 14 Junior Poster

11 Years Ago

Thanks for the effort!