Forums

Open NextGEN gallery from link or single image (8 posts)

  1. klynam
    Member
    Posted 6 months ago #

    It's really a simple question: How do you open a nextGEN gallery from a link or a single image? But apparently no one has a simple answer. Well here goes - pretty simple and definitely a TOTAL HACK JOB, but it worked for me (well, sort of...)

    The key to the hack is actually having the gallery on the page, but hiding it from view with a DIV.

    First, use the standard NGG shortcode to place a gallery on your page. Then wrap the shortcode in a DIV set to display:none as shown below.

    <div style="display: none;">[nggallery id=1]</div>

    If you want to link to a NGG gallery from a TEXT LINK, do something like this:

    <p><a class="cboxElement" rel="lightbox[set_2]" title="" href="http://www.yourdomain.com/wp-content/gallery/gallery-name/first-image.jpg">Open Gallery</a></p>

    Apparently the CLASS isn't important but the REL is important.*

    If you want to link to a NGG gallery from a SINGLE IMAGE, do something like this:

    <p><a class="cboxElement" title="" href="http://www.yourdomain.com/wp-content/gallery/gallery-name/first-image.jpg" rel="lightbox[set_2]"><img src="http://www.yourdomain.com/wp-content/gallery/gallery-name/first-image.jpg" alt="" /></a></p>

    Technically, you can use a different image from the gallery for the img src reference - which is the image that actually appears on the page.

    Again, apparently the CLASS isn't important but the REL is important.*

    *To get the correct REL reference, I simply placed a gallery on my page, then viewed the page in FireFox. I right-clicked the first gallery image on the page and chose "Inspect Element" using FireBug. In the page code, I found the CLASS and REL references set by NGG on the image link, so I used those. Simple enough. (In my case, I was using the Lightbox-Plus plugin with NGG gallery set to Lightbox, which I guess created the "lightbox[set_2]" REL reference. Yours will probably be different.)

    !!!IMPORTANT NOTE!!!

    As I said, this hack sort of works.

    For some reason, this hack adds the reference image as an additional image to the gallery and drops you onto that last (extra) image of the gallery view. So if your gallery has 5 images, when you launch the gallery using this hack you will get 6 images with the reference image appearing twice, and the first image you see will be the extra image: "Image 6 of 6".

    I tried "excluding" the reference image in the NGG gallery but that can create other problems and I can't find any other workaround to this hack.

    Basically, if you can live with an extra duplicated image in your gallery view, this simple hack might work out for you.

    As always, this worked for my install, my theme, my browser, etc.

    Your mileage may vary - but I do hope it helps you.

  2. JustinFYI
    Member
    Posted 5 months ago #

    I was thinking of a similar hack. Hard to believe this sort of thing hasn't been already been implemented considering it just seems like a basic need. Thanks for posting klynam.

  3. Fastone
    Member
    Posted 3 weeks ago #

    Hey, just to comment on this.

    I added a little tweaked solution for this, works fine. Check it out.

    Thanks Klynam for leading on with this hack :)

  4. Fastone
    Member
    Posted 3 weeks ago #

  5. mixibixi
    Member
    Posted 2 weeks ago #

    Anybody have a workaround the extra image or how to start gallery from the first image at least?

    @Fastone can you expand on your solution? What "right" tag did you find and are you getting an extra image and does the slideshow start from the first image?

  6. Fastone
    Member
    Posted 2 weeks ago #

    Hey,

    The way I did it only shows the images added to the gallery, no extra images.

    Mixibixi, first of all, it's not a slideshow as in "flash-slideshow". But the lightbox "slideshow" :)

    Yes, it starts from the first image in the gallery. With the right tag, I mean the Link Rel tag given in the html sourche. Look at this image:

    http://dl.dropbox.com/u/18458742/NGGtagg.jpg

    What I did first, was to ad the gallery I wanted as usually in WP, and just show all the images in the page.

    I then checked the html source code for the link to the first image in the gallery, and copied that. I also check what the Link Rel tag was for that link. Probabaly [lightbox_set1].

    Then, when you add any image to your post or page in WP that you want to use as a link for your gallery, paste that link you copied in to the Link URL field in the settings for you image. Click Add to Page. Then, go back in to the settings for that image, go to Advanced Settings, and ad the right "tag" for that link in the Link Rel fied there. ( [lightbox_set1].

    Now, any image you have chosen should work as a link for your gallery, showing your images in the order you have set in your gallery.

    Now you can go on and hide your whole gallery using CSS in your page.

    You fix? :)

  7. mixibixi
    Member
    Posted 2 weeks ago #

    Thanks. It does seem to work. I don't know what I was doing wrong previously. Was getting the same result as the first post.

  8. Fastone
    Member
    Posted 2 weeks ago #

    Ok, good you got it working :)

    Stay well.

Reply

You must log in to post.

About this Topic