9 Replies Latest reply: Nov 14, 2012 1:50 PM by Nancy O. RSS

    Help creating a lightbox please

    marie_barnsley Community Member

      Hi everyone

       

      I've just launched my first portfolio site and I really need some help creating a lightbox to show my work.

       

      This is the page i need help with

       

      www.marieparkinson.co.uk/portfolio.html

       

      I think I'm struggling with online tutorials as I've already designed the layout of my work (and maybe i've not used the best coding either??)

      What i want to happen is the user clicks on the thumbnail image and in a pop-up screen another full size image is displayed.

       

      I've read all the tutorials etc and downloads for it, but i just don't know where to start.

       

      I've read a lot about JQuery, is this something I need to download??

       

      Please help!

       

      Any comments will be really appreciated!!

      Thanks!

        • 1. Re: Help creating a lightbox please
          Jon Fritz II MVP

          Here are a couple scripts that should handle what you want with decent how-to's built in...

           

          http://lokeshdhakar.com/projects/lightbox2/

           

          or the more flexible...

           

          http://fancybox.net/

          • 2. Re: Help creating a lightbox please
            Nancy O. MVP

            Primer for using jQuery Plug-ins:

             

            #1 Download the Plug-in files from the source site.  I'm using Fancybox in this example:

             

            #2 Extract Zip files with WinZip or StuffIt and save to your local site folder.  I prefer to keep scripts in my Scripts folder CSS files in my Styles folder but that's up to you.

             

            #3 jQuery has 3 basic parts to it:

            •     the core code library which you ref in your <head>
            •     the plug-in scripts & CSS files which you ref in your <head>
            •     the function code inside <script> tags to invoke the plug-in. I prefer to put this above closing </body> tag but again that's up to you.

             

            EXAMPLE:

            <head>

             

            <!--Link to latest jQuery core library from the CDN-->

            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

            </script>

             

            <!-- links to  plug-in files in your local site-->

            <script type="text/javascript" src="Scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

            <script type="text/javascript" src="Scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

            <link rel="stylesheet" type="text/css" href="Styles/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

             

            </head>

             

            <body>

             

            <!--BEGIN IMAGE GALLERY -->

            <div id="thumbs" class="fancybox">

             

            <a rel="group" href="Images/big-image1.jpg" title="optional captions and description"><img src="Images/small-image1.jpg" alt="image 1" width="75" height="75" /></a>


            <a rel="group" href="Images/big-image2.jpg" title="optional captions and description"><img src="Images/small-image2.jpg" alt="image 2" width="75" height="75" /></a>


            <a rel="group" href="Images/big-image3.jpg" title="optional captions and description"><img src="Images/small-image3.jpg" alt="image 3" width="75" height="75" /></a>

            </div>

             

            <!--Fancybox function-->

            <script type="text/javascript">

            /* Apply fancybox slideshow to 'group'*/
            $("a.group").fancybox({
            'transitionIn'     :     'elastic',
            'transitionOut'     :     'elastic',
            'speedIn'          :     600,
            'speedOut'          :     200,
            'overlayShow'     :     false
            });
            });

            </script>

             

            </body>

             

            That's all there is to it.

             

             

            Nancy O.

            • 3. Re: Help creating a lightbox please
              marie_barnsley Community Member

              Thanks so much, I'm working through this and slowly getting there.

               

              A couple of questions though, how do I edit the style of the image boxes?

               

              I'm trying to adjust the padding through the style.css in the Fancybox files but it doesn't seem to be working?

               

              Also, the last section about the function. At the moment the images are just acting like links to the bigger size images. There's no gallery type function, if you can see what I mean below?

               

              www.marieparkinson.co.uk/portfolio.html

               

              Thanks again!!

              • 4. Re: Help creating a lightbox please
                Nancy O. MVP

                I don't recommend editing the fancybox scripts or CSS code.  Use your own stylesheet to style the #thumbs div.

                 

                I did a quick sample page with 3 of your images and it appears to work. 

                View source in your browser to see the code.  Note: my function code is different.

                http://alt-web.com/GALLERY/Photo_Gallery3.html

                 

                Be sure to optimize your images for the web.  Also do not use spaces in folder or file names.  Dots, dashes or underscores are fine but not spaces.

                 

                 

                Nancy O.

                • 5. Re: Help creating a lightbox please
                  marie_barnsley Community Member

                  This is fantastic! thanks so much! You've really been helpful.

                   

                  I'll look from scratch and sort out my images first.

                   

                  Thanks again, really appreciate your help!!

                  • 6. Re: Help creating a lightbox please
                    marie_barnsley Community Member

                    The function aspect is working exactly right now so thank you!!

                     

                    The only problem I'm now encountering is the 'float' aspect.

                     

                    The first image in the gallery has the properties of the #thumbs div however the following images are not, they are lining up underneath in a column as if they don't have the #thumbs properties.

                    The only way I'm getting them to work is to close the thumbs div after each image like so,

                     

                    <div id="thumbs" class="fancybox">

                    <a rel="group" href="Work/images/fullsize/butterflyflyer.jpg" title="optional captions and description"><img src="Work/images/thumbnails/images/butterflyflyer.jpg" alt="image 1" width="240" height="150" /></a>

                    </div>

                     

                     

                    <div id="thumbs" class="fancybox">

                    <a rel="group" href="Work/images/fullsize/brandedflyer.jpg" title="optional captions and description"><img src="Work/images/thumbnails/images/brandedflyer.jpg" alt="image 2" width="240" height="150" /></a>

                    </div>

                     

                    Just using one div at the beginning isn't working.

                    Any ideas why the other images aren't working right?

                    • 7. Re: Help creating a lightbox please
                      Nancy O. MVP

                      Probably something in your layout CSS.

                      Can you show us a link?

                       

                       

                      Nancy O.

                      • 8. Re: Help creating a lightbox please
                        marie_barnsley Community Member

                        http://marieparkinson.co.uk/portfolio.html

                         

                        I've done the first section, its working brilliant on the face of it, I just know that the coding isn't the right way to do it.

                         

                        Thanks again

                        • 9. Re: Help creating a lightbox please
                          Nancy O. MVP

                          Try replacing what you have now with this.  No floats required.

                           

                          CSS code:

                           

                          #thumbs img {

                          border: 2px solid #98726f;

                          /**space between images**/

                          margin: 10px 25px 20px 25px;

                          /**same sized images**/

                          width: 242px;

                          height: 150px;

                          }

                           

                          HTML Code:

                           

                          <!--Begin Gallery-->

                          <div id="thumbs" class="fancybox">

                           

                          <!--Note image sizes and borders are handled by the CSS-->

                          <a rel="group" href="Work/images/fullsize/butterflyflyer.jpg" title="Canon camera advertisement"><img src="Work/images/thumbnails/images/butterflyflyer.jpg" alt="image 1"/></a>

                           

                          <a rel="group" href="Work/images/fullsize/brandedflyer.jpg" title="Email campaign promoting top brands, produced for VOW"><img src="Work/images/thumbnails/images/brandedflyer.jpg" alt="image 2"/></a>

                           

                          <a rel="group" href="Work/images/fullsize/copyshopflyer.jpg" title="Promotional flyer promoting a new IPhone app, produced for Office-Is"><img src="Work/images/thumbnails/images/copyshopflyer.jpg" alt="image 3"  /></a>

                           

                          <a rel="group" href="Work/images/fullsize/vespaflyer.jpg" title="HP promotional artwork"><img src="Work/images/thumbnails/images/vespaflyer.jpg" alt="image 4" /></a>

                           

                          <a rel="group" href="Work/images/fullsize/prospectflyer.jpg" title="Promotional artwork for DC Direct"><img src="Work/images/thumbnails/images/prospectflyer.jpg" alt="image 5" /></a>

                           

                          <a rel="group" href="Work/images/fullsize/twiningsflyer.jpg" title="Promotional artwork for Twinings Tea"><img src="Work/images/thumbnails/images/twiningsflyer.jpg" alt="image 6" /></a>

                           

                          <a rel="group" href="Work/images/fullsize/easterflyer.jpg" title="Promotional artwork for Twinings Tea"><img src="Work/images/thumbnails/images/easterflyer.jpg" alt="image 7" /></a>

                           

                          <!--end gallery--> 

                          </div>

                           

                           

                           

                          Nancy O.