Skip navigation
atlnycdude24
atlnycdude24
Currently Being Moderated

A picture slider/lightbox2 issue

Aug 2, 2012 4:48 PM

I am creating a picture slider show for someone, it has a previous and next button. Here is also what i'm trying to acommplish. Whenever the user ciicks on the image, it enlarge the image. I am using lightbox2. Now, I have no idea why the slider is not workin. the image will "enlarge" but also it does not show the caption of the image. Here is the link to the site

 

http://www.rodriguezstudios.com/division9/gallery.html

 

Plus here is the html and css code

 

 

<div id="container">

           <img id="prev" class="prev" src="Gallery/buttons/prev.png" /><img id="next" class="next" src="Gallery/buttons/next.png"/>

           <div class="slider">

    <ul>

              <li><img class="slider" /><a href="Gallery/images/small/pic1.png" rel="lightbox"><img src="Gallery/images/large/Atlantis-Resort-Atlantis-Resort-1.jpg" alt="atlantis"/></a></li>

        <li><img class="slider" /><a href="Gallery/images/small/pic2.png" rel="lightbox"><img src="Gallery/images/large/Atlantis-Resort-Lobby.jpg" alt="Lobby"/></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic3.png" rel="lightbox"><img src="Gallery/images/large/Guitar-Center-Stores.jpg" alt="guitar"/></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic4.png" rel="lightbox"><img src="Gallery/images/large/IMG_0096.jpg" alt="floor"/></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic5.png" rel="lightbox"><img src="Gallery/images/large/J-C-Penney-Store-Front.jpg"/></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic6.png" rel="lightbox"><img src="Gallery/images/large/Maggianos.jpg"/></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic7.png" rel="lightbox"><img src="Gallery/images/large/Kohls.jpg"/></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic8.png" rel="lightbox"><img src="Gallery/images/large/Portfino-Bay-Hotel-villa-pool.jpg" /></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic9.png" rel="lightbox"><img src="Gallery/images/large/Stein-Mart-Sales-Floor.jpg" /></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic10.png" rel="lightbox"><img src="Gallery/images/large/The-Westin-Charlotte-NC-indoor-pool.jpg" /></a></li>

 

 

        <li><img class="slider" /><a href="Gallery/images/small/pic11.png" rel="lightbox"><img src="Gallery/images/large/The-Westin-Charlotte-NC-Lounge.jpg"/></a></ li>

 

 

        <!--images goes here/lightbox-->

        </ul>

           </div><!--end of container"-->

</div><!--end of slider-->

 

 

 

 

 

<!--Sliding Photo Gallery-->

 

 

 

 

#container {

          position:relative;

          margin-left:50px;

          margin-right:50px;

          margin-top:50px;

          width:700px;

 

 

}

 

 

 

 

#prev{

          position:absolute;

          top: 175px;

          left:-20px;

          z-index:10;

}

 

 

 

 

#next{

          position:absolute;

          top: 175px;

          right:-21px;

          z-index:10;

}

 

 

 

 

.slider{

          width: 700px;

          height:400px;

          border:1px solid #000;

 

 

}

 

 

 

 

 

Your help will be greatly appreciated.

930 Views   6 Replies   Latest reply: atlnycdude24, Aug 4, 2012 6:10 PM
 
Replies
  • osgood_
    Currently Being Moderated
    1. osgood_,
    Aug 3, 2012 3:35 AM   in reply to atlnycdude24
    Report

    Your slider will work if you set the images up correctly according to the instructions:

     

     

    Like this:

     

    <a href="Gallery/images/small/pic1.png" rel="lightbox"><img src="Gallery/images/large/Atlantis-Resort-Atlantis-Resort-1.jpg" alt="atlantis"/></a>

     

     

    <a href="Gallery/images/small/pic2.png" rel="lightbox"><img src="Gallery/images/large/Atlantis-Resort-Lobby.jpg" alt="Lobby"/></a>

     

     

    However your lightbox most likey won't work as the two jquery scripts will be in conflict with one another.

     
    |
    Mark as:
  • atlnycdude24
    Currently Being Moderated
    2. atlnycdude24,
    Aug 3, 2012 8:36 AM   in reply to osgood_
    Report

    hmmmm...Are you referring to this unnecessary jquery code?

     

    <script type="text/javascript">

    //<![CDATA[

    $(window).load(function() {

            $('#slider').nivoSlider();

    });

    //]]>

    </script>

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    3. Rik Ramsay,
    Aug 3, 2012 9:27 AM   in reply to atlnycdude24
    Report

    It looks like you are trying to combine NivoSlider with LightBox2 - I would doubt very much if this would work! You would need to find a lightbox script that also doubles as a slideshow.

     

    With that being said, from a user perspective I would hate to have a "gallery" with just a rotating slideshow which I need to click. I would expect to see a gallery of images where I can click each one and enlarge it, and THEN scroll through them one by one if I wanted to. This is exactly what lightbox2 offers - you just need to read their instructions on how to implement it.

     

    Eg:

    Change this:

     

    <li><img class="slider" /><a href="Gallery/images/small/pic1.png" rel="lightbox"><img src="Gallery/images/large/Atlantis-Resort-Atlantis-Resort-1.jpg" alt="atlantis"/></a></li>

     

     

    To this:

    <li><a href="Gallery/images/large/Atlantis-Resort-Atlantis-Resort-1.jpg" rel="lightbox[Gallery]" title="atlantis"><img src="Gallery/images/small/pic1.png" alt="atlantis"/></a></li>

     

    You will notice the addition of "title" in the <a> tag - this is where your caption is - not in the ALT. Also, the rel="lightbox[Gallery]" tells the browser to open the image using LightBox but also to show all connected images with [Gallery]. In other words, to show all the images in a gallery in the one pop-up slideshow, add [Gallery] to them all. This allows you to group certain images together.

     

    Lastly, the image reference inside the <a> tag should be the LARGE image, not the thumbnail. Your <img> src should then be the thumbnail.

     

    Good luck!

    Rik

     

    EDIT:// In addition to this, you need to modify your lightbox.js file so it can show the next/prev/close icons. You have obviously moved them from the default location which is in a folder images/.

    function LightboxOptions() {

          this.fileLoadingImage = 'images/loading.gif';

          this.fileCloseImage = 'images/close.png';

     

    And then again in the lightbox.css file

    /* line 81, ../sass/lightbox.sass */

    .lb-prev:hover {

      background: url(../images/prev.png) left 48% no-repeat;

    }

     

    /* line 85, ../sass/lightbox.sass */

    .lb-next:hover {

      background: url(../images/next.png) right 48% no-repeat;

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    4. osgood_,
    Aug 3, 2012 9:25 AM   in reply to atlnycdude24
    Report

    atlnycdude24 wrote:

     

    hmmmm...Are you referring to this unnecessary jquery code?

     

    <script type="text/javascript">

    //<![CDATA[

    $(window).load(function() {

            $('#slider').nivoSlider();

    });

    //]]>

    </script>

    No. You need that.

     

    Your slider image src tags are set up incorreclty

     

    What is <img class="slider" />?

     

    If anything the class should be contained withing the img scr tag itself:

     

    <img src="Gallery/images/large/Guitar-Center-Stores.jpg" class="slider" alt="guitar"/>

     

    BUT you don't need it, you just have to set the images up as follows to make the slider work:

     

    <a href="Gallery/images/small/pic3.png" rel="lightbox"><img src="Gallery/images/large/Guitar-Center-Stores.jpg" alt="guitar"/></a>

     

    BUT as I said your lightbox will probably fail as you have jquery scripts on the page which will conflict with each other.

     

    You need to find some jquery scripts which deliver what you want, both a slider and a lightbox, if one exists. I don't know of any but I'm sure there must be a solution.

     
    |
    Mark as:
  • atlnycdude24
    Currently Being Moderated
    5. atlnycdude24,
    Aug 3, 2012 9:37 AM   in reply to Rik Ramsay
    Report

    Hi Rik, thanks for the response. Actually in regards to nivo, here is what I did. On the front page of the website, it has a nivo slider so what I've done i just created a new file by using save as from dreamweaver and forgot to delete the  NivoSlider code from the page. This is not a nivoslider project for the gallery but a regular jquery slide show.. I'll fix the code and I'll let you know if there is any more issues that comes my way. Thanks for your assistance.

     
    |
    Mark as:
  • atlnycdude24
    Currently Being Moderated
    6. atlnycdude24,
    Aug 4, 2012 6:10 PM   in reply to atlnycdude24
    Report

    The lightbox is now  working but the slider won't move. I could use some more help, thanks

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points