#1
  1. Put a potato on it!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Location
    Maryland
    Posts
    304
    Rep Power
    970

    Fancybox gallery with description


    I'm having trouble figuring out the best way to do this. I'm using fancybox to create an image gallery, however I would like to add a description for each image below the image when it pops up.

    So far what I've come up with is to add the description to the link's "title" attribute, the downside is that it doesn't wrap very well if the title is very long. The other solution I see is to create a div box that will load the image and then a description below. Here is how the image thumbnails are generated:

    PHP Code:
    print "<div class='gallery'>";
        print 
    "<ul>";
        foreach(
    $images as $img) {
            
    $img_src File::getByID($img['fID']);
            
    $fv $img_src->getRecentVersion();
            print 
    "<li class='gallery'><a id='show_image' href='".$img_src->getRelativePath()."'><img id='".$img['fID']."' class='gallery thumbnail' src='".$img_src->getRelativePath()."' /></a></li>";
        }
        print 
    "</ul>";
        print 
    "</div>"
    This is all in Concrete5 so a file library is being loaded which then generates the image path. Here is the javascript/fancybox code:

    PHP Code:
    $("#show_image").fancybox();

            $(
    "div.image_fancybox").fancybox({
                
    'overlayShow':true,
                
    'minWidth':750,
                
    helpers: { 
                    
    title: {
                        
    type'outside'
                    
    }
                }
            }) 
    What I'm wondering is do I put a hidden span tag after each image that has its description? I could then retrieve the image's src and the span's text and generate a div box with those elements within through jquery. I'm by no means an expert or even that good with javascript, so if there's a simpler way to do this, I'm open to suggestions.
    "Those who can make you believe absurdities can make you commit atrocities."
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Originally Posted by Jyncka
    What I'm wondering is do I put a hidden span tag after each image that has its description? I could then retrieve the image's src and the span's text and generate a div box with those elements within through jquery.
    Yes, you could do it that way or... you could go the CSS route (example below).

    Code:
    <style>
    img:nth-child(1):hover ~ #imginfo1:before {
    content:"Visit \"http://www.google.com\"\A For All You Search Needs!";
    color:blue;
    text-decoration:underline;
    border:solid 1px black;
    padding:10px;
    width:255px;
    background:rgb(255,255,200);
    border-radius:10px;
    text-align:center;
    box-shadow:#555 5px 5px 5px;
    position:absolute;
    margin-top:5px;
    display:block;
    white-space:pre;
    font-family:arial;
    font-weight:bold;
    }
    </style>
    
    <img src="http://www.google.com/images/srpr/logo3w.png"/>
    <span id="imginfo1"></span>

IMN logo majestic logo threadwatch logo seochat tools logo