CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sforcash
sforcash

Reputation: 429

Issues running jquery slider and lightbox on same page?

Complete noobie trying to teach myself some javascript.

Basically, I can't get a lightbox to run at the bottom of my page while running a slider towards the top. I started with the slider and it works perfectly on it's own. However, when I add the code to run the lightbox, it doesn't work and the slider stops working. I believe my issue is with my CSS, but I'm not sure. Any help is appreciated.

In the head: 

<!--Main Page Stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="CSS/inland-wood.css" />

<!-- Slider -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link href="CSS/slider.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">  // This is the script for the banner slider
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

<!-- Lightbox Effect -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="CSS/lightbox.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">  // This is the script for the lightbox effect
    $(document).ready(function() {
        $('#thumbnails a').lightBox();
        });
    });
</script>

My HTML:

<div id="thumbnails">
  <ul class="clearfix">
    <li>
      <a href="images/photos/01-turntable-illustration-graphic.png"  title="Turntable">
        <img src="images/photos/01-turntable-illustration-graphic-thumbnail.png" alt="turntable">
      </a>
    </li>
    <li>
      <a href="images/photos/02-robot-diy-kit.png" title="DIY Robot Kit">
        <img src="images/photos/02-robot-diy-kit-thumbnail.png" alt="DIY Robot Kit">
      </a>
    </li>
   </ul>
 </div>

My CSS:

/** reset lightbox position **/
#lightbox-container-image-data-box {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/** page structure **/
#w {
    display: block;
    width: 750px;
    margin: 0 auto;
    padding-top: 30px;
}

#content {
    display: block;
    width: 100%;
    background: #fff;
    padding: 25px 20px;
    padding-bottom: 35px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

#thumbnails {
    display: block;
    margin-bottom: 10px;
}
#thumbnails ul li {
    float: left;
    margin-right: 26px;
    margin-bottom: 12px;
}

Upvotes: 1

Views: 939

Answers (1)

rcorrie
rcorrie

Reputation: 921

Add this code after the last script in your header:

<script>
    $.noConflict();
<script>

Here is your revised code

<link rel="stylesheet" type="text/css" media="all" href="CSS/inland-wood.css" />

<!-- Slider -->
<link href="CSS/slider.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">  // This is the script for the banner slider
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

<!-- Lightbox Effect -->
<link href="CSS/lightbox.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">  // This is the script for the lightbox effect
    $(document).ready(function() {
        $('#thumbnails a').lightBox();
        });
    });
</script>

<script>
    $.noConflict();
<script>

NOTE: this isn't related to your problem but, you should always add the CSS link before the Script it pertains to.

Upvotes: 1

Related Questions