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 slider

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

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

All 4 Replies

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

garyjohnson 14 Junior Poster

11 Years Ago

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!

jQuery slider is not working

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers