Skip navigation
Currently Being Moderated

Help creating a lightbox please

Nov 8, 2012 12:16 PM

Tags: #jquery #dreamweaver #images #lightbox #gallery

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!

 
Replies
  • Currently Being Moderated
    Nov 8, 2012 12:28 PM   in reply to marie_barnsley

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 8, 2012 12:50 PM   in reply to marie_barnsley

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 12, 2012 11:14 AM   in reply to marie_barnsley

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 14, 2012 12:24 PM   in reply to marie_barnsley

    Probably something in your layout CSS.

    Can you show us a link?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 14, 2012 1:50 PM   in reply to marie_barnsley

    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.

     
    |
    Mark as:

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