WordPress.org

Ready to get started?Download WordPress

Forums

Is it still not possible to launch a Lightbox gallery from single image? (8 posts)

  1. demonboy
    Member
    Posted 6 months ago #

    I remember trying to implement this many years ago with WordPress. It was messy because it involved NextGen and changing some code and avoiding upgrades in order to maintain the changes. Anyway, I've tried my best to avoid NextGen Gallery as I never got on with it but it seemed the only solution this time was to use NextGen once more. After installing it, it played havoc with my WP back-end and killed a plugin, so I uninstalled it once more. Almost every solution on the WP forums either relates to older versions of NextGen (all the shortcodes have changed), or are closed topics with unfinished solutions. So, I'm back to square one.

    I would like a single image (or text link) that is clickable and, when clicked, launches a responsive Lightbox slideshow/gallery with next/previous buttons to all images in that gallery. I was originally looking for a slider to do this but I'm not sure that's possible.

    I really hope there's a new and simple solution out there because I know that there are many people looking for this, so I'm hoping I've just been out of touch and things have developed.

    If anyone can help I would be extremely grateful.

    Thank you.

  2. eGriffinWebDesign
    Member
    Posted 6 months ago #

    Hey demonboy,

    This is not the most elegant solution, but it looks like it might work for what you want to do without having to deal with NextGen Gallery or any other plugin.

    Possible Solution

    Hope this helps,

    Michael

  3. demonboy
    Member
    Posted 6 months ago #

    Hi Michael,

    Thanks for the link. Unfortunately it didn't work for me and I tried all different kinds of permutations of the rel tag. I even came across the bug in WP 3.5.1 but I'm running 3.6.x so that wasn't it. I thought it might have been my theme, but I had the correct header and footer hooks.

    I solved it though, and it was quite simple. I just installed the prettyPhoto plugin and used the display:none style. My working code, copied verbatim (including leading the rel tag as it is), was something like this:

    <a href="http://localhost/newphotog/wp-content/uploads/2012/05/IMG_0067b-300x300.jpg" width="1500px" height="1500px rel="prettyPhoto[galleryname]"><img src="http://localhost/newphotog/wp-content/uploads/2012/05/IMG_0067b-300x300.jpg" alt=""/ ></a>
        <a href="http://localhost/newphotog/wp-content/uploads/2012/05/IMG_0058-300x300.jpg" rel="prettyPhoto[galleryname]"><img src="http://localhost/newphotog/wp-content/uploads/2012/05/IMG_0058-300x300.jpg" alt=""/ style="display: none;"></a>
        <a href="http://localhost/newphotog/wp-content/uploads/2012/05/IMG_0005-300x300.jpg" rel="prettyPhoto[galleryname]"><img src="http://localhost/newphotog/wp-content/uploads/2012/05/IMG_0005-300x300.jpg" alt=""/ style="display: none;"></a>

    As you can see only the first thumbnail is displayed, the other two are hidden by the display style.

    Hope that helps anyone else still stumped on this. I'll keep this open for a bit in case anyone else has questions.

  4. demonboy
    Member
    Posted 6 months ago #

    That's ROYAL prettyPhoto plugin, not just the prettyPhoto plugin, by the way.

    I'll provide a walk-through for people because I hate it when someone finds a solution but doesn't explain it properly. This is for WP 3.6.1 and any theme that has been properly coded to include the correct header, footer and image hooks. Here goes:

    1. Install and activate the Royal prettyPhoto plugin. Official page here

    2. Create a new post

    3. Click 'add media'

    4. Don't create a gallery and don't select already existing images from your library (see explanation at end). Instead upload the images you want to include.

    5. Before clicking ok to insert the images into your post, make sure you select 'link to: media file:'. Now click ok.

    6. This then places the html in your page. If you are in 'text' editing rather than 'visual' editing, you should see something like this:

    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030429.jpg"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030429.jpg" alt="PA030429" width="600" height="436" class="aligncenter size-full wp-image-300" /></a>
    
    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030425.jpg"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030425.jpg" alt="PA030425" width="600" height="450" class="aligncenter size-full wp-image-301" /></a>
    
    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030345.jpg"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030345.jpg" alt="PA030345" width="600" height="450" class="aligncenter size-full wp-image-302" /></a>

    Note: WP has added a weird 'class=' to the image. I would be tempted to strip this out at this stage and either leave it or add your own.

    6. IGNORING THE FIRST IMAGE, add the style=display:none tag to all the images. Your code should now look like this:

    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030429.jpg"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030429.jpg" alt="PA030429" width="600" height="436" /></a>
    
    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030425.jpg"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030425.jpg" alt="PA030425" width="600" height="450"  style="display:none"/></a>
    
    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030345.jpg"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030345.jpg" alt="PA030345" width="600" height="450" style="display:none"/></a>

    7. Finally, add a rel tag in ALL a href classes like this:

    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030429.jpg" rel="prettyPhoto[galleryname]"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030429.jpg" alt="PA030429" width="600" height="436" /></a>
    
    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030425.jpg" rel="prettyPhoto[galleryname]"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030425.jpg" alt="PA030425" width="600" height="450" style="display:none"/></a>
    
    <a href="http://www.yourblog.com/wp-content/uploads/2013/10/PA030345.jpg" rel="prettyPhoto[galleryname]"><img src="http://www.yourblog.com/wp-content/uploads/2013/10/PA030345.jpg" alt="PA030345" width="600" height="450" style="display:none"/></a>

    That should do it.

    Problems arise when you try to select images already uploaded into your library. Rather than giving a straight a href path, it uses an internal reference and then adds it's own rel= code. If this happens, just copy the path from the img src and paste it into the a href path, and replace the rel= tag with the one suggested above.

    The only rule with the rel= tag is that it has to be the same across all images if you want them all to link together. You can call the name of the gallery anything you want.

    Hope this helps.

  5. demonboy
    Member
    Posted 6 months ago #

    NOTE: Royal prettyPhoto is semi-responsive. That is, you have to reload the page in order for the image to fit. I think this is quite normal but I've yet to try it on my mobile as I haven't published this yet. Also, my one issue with the prettyPhoto is that the margins around the image are too wide. I want edge-to-edge images, so I'm hoping this is something I can change in the CSS.

    I tried the plugin Responsive Lightbox and that resorted back to the same old problem of only linking to the first image, which is something a lot of people have been complaining about.

    I shall continue to look into this.

  6. Kristin_Reveal
    Member
    Posted 2 months ago #

    demonboy -

    Thank you! This worked, after searching for a few hours. Great, simple, easy to follow response. Much appreciated.

  7. Kristin_Reveal
    Member
    Posted 2 months ago #

    demonboy -

    Thank you. This is exactly what I was looking for. It worked, except for one kink. When I click on the image, TWO lightboxes are opening, both with the same images as part of the gallery. The lightboxes do not look the same, however. One has social media icons, the other doesn't. I can't figure out how to get it to only open one.

    Any help you have would be much appreciated. Thank you.

  8. Kristin_Reveal
    Member
    Posted 2 months ago #

    Ok, nevermind. Figured it out. Please ignore two previous posts.

Reply

You must log in to post.

About this Topic