Open NextGEN gallery from link or single image

  • klynam

    (@klynam)


    13 years 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="https://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="https://www.yourdomain.com/wp-content/gallery/gallery-name/first-image.jpg" rel="lightbox[set_2]"><img src="https://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.

Viewing 15 replies - 1 through 15 (of 16 total)

  • 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.

    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 ??

    In this post: ??

    https://www.ads-software.com/support/topic/plugin-nextgen-gallery-single-images-to-slideshow?replies=3#post-2807918

    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?

    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:

    https://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? ??

    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.

    Ok, good you got it working ??

    Stay well.

    Fastone-

    I’m trying your fix but seem to be getting lost somewhere. I’ll start off by admitting that I am a complete moron when it come to this stuff.

    Anyhow, I am following klynam’s instructions and am coming up with the problem he described of having the first image tacked on to the end, and it always starting at that image.

    So I moved on to your instructions and am getting lost here:

    “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].”

    Are you referring to using the Upload/Insert function to insert an image from NextGen Gallery into the post?

    If so, exactly where do you find these particular settings (Link URL, Advanced Settings, etc.)?

    If not, could you point me to the right direction? This feature is (almost) exactly what I have been looking for, and would like to get it to work right.

    Thank you in advance for any help you can provide.

    Fastone-

    OK, scratch all of that above. I figured it all out but still have one problem-

    When you click on the image I posted and it opens the gallery, it only opens the first image in the gallery and doesn’t let me navigate to any others.

    For example, I created this link here:

    https://www.asplenia-studios.com/1549-2/

    When you click on the robot guy, it opens up the first image in a separate gallery which actually has two images. However, as you can see, there is no option to navigate to that second image.

    Once again, and assistance would be helpful!

    Hey Jeffsorley,

    Well, yeah. When I read my own text now, it can be confusing.

    I looked at your link, and I think you have done the right thing, just forgot to add “lightbox[set_1]” in the advanced tab when you click to edit an image. I dont know wich set-nr for you to use, so to find our that, you need the check the html sourcecode in Chrome or other.

    But, did you ad an image with the upload/insert function in WP? Coz what I did, when using NGGallery, is using the little NGG icon in the WP editmenu, and actually ad a complete gallery with “show as”: image list.

    Of course then, you will have all the images displayd in the page. But then I just hid them using CSS. I found the CSS id also in the html source code in Chrome. Look for a DIV with class like “ngg-galleryoverview”. In CSS set this to display:none.

    You dig? :p

    The gallery is rendered in the page, but not visible. But it’s still accessible for opening via your link from any other visible image on the page. Just remember adding “lightbox[set_1]” (or other number for you).

    The visible image you want to use as link-image, must link to the first image in the gallery. Check the source code again, you’ll find the url to your first image there. Rember, full image. Not just the thumbnail ??

    Hope it works,

    G’night.

    Fastone- Thx for the reply. I started anew and ran into some problems and, to be honest, like I said before- I am a bit of a moron with this stuff.

    First off, let me tell/show you where I am at now. Basically, my code that I have put in looks like this on WP:

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

<p style="text-align: center;"><a href="https://www.asplenia-studios.com/wp-content/gallery/otus-analytics-grasshopper/grasshoppercomicpage1-finalsample_small.png" rel="[lightbox_set20]"><img class="aligncenter  wp-image-1565" title="Read Here" src="https://www.asplenia-studios.com/wp-content/uploads/2012/06/OTUS-FB-Profile.png" alt="" width="320" height="305" /></a></p>

    I am using klynam’s tip for hiding the gallery, and for the visible image/link, I have used your method of uploading the image, changing to link URL, and then going into the advanced settings (haha, I found it!) to change the link REL.

    However, the result I am getting is the same as klynam’s original bug- when you click on the image to load the gallery, it is duplicating the first image, putting it at the end, and opens the lightbox on that duplicate.

    Example here (click on the robot guy to open the lightbox): https://www.asplenia-studios.com/grasshopper-2/

    So, this leads me to a couple of questions form your last response:

    “Coz what I did, when using NGGallery, is using the little NGG icon in the WP editmenu, and actually ad a complete gallery with “show as”: image list.”

    I’m not entirely sure as to what you are referring to here. What/where is the little NGG icon? When you say add a gallery, do you mean going to your gallery and creating a page? Usually I just manually type in [nggallery id=xx] manually, but you could be referring to something else. Either way, when I add a gallery, I never get any options such as “show as” or anything else.

    Now, here’s where I am going to show you how much of a noob I am…

    “Look for a DIV with class like “ngg-galleryoverview”. In CSS set this to display:none.”

    Where/how do I actually type this up to make it happen? Is this something I type onto my page à la HMTL? Do I go somewhere else to edit/add it?

    For a third time, seriously, thanks for all of your help here!

    Hey man!

    Sorry, I’ve been busy with a filmproduction for two weeks. So I’m not realy quick with my replies. Did you get this to work?

    Maybe I can assist some time this weekend.

    Hello Fastone

    I hope you don’t mind if I can enter this thread as I have something similar I am trying to do.

    (please tell me if I should open this as a separate subject)

    Essentially I’m trying to open a NextGen gallery from a link. The link in question is actually on the main WP menu.

    Ideally I want someone to click the menu link and the gallery (I’m using Lightbox Evolution to display the gallery) to open immediately.

    I thought this was going to be an easy thing to do but appears not.

    Any ideas?

    Hey Polar Bear,

    Did you get this working? It’s ok for me to join in here. I’ll check this out right away. But I’m not familiar with that version of Lightbox, so I don’t know if any “link rel” will work the same way.

    I would say that it shouldnt matter what you link from, as long as you are refering to lightbox as link relative. Maybe I need to try this my self…

    It’s of course important that your lightbox script is loading properly in your header ??

    J.

    Jeffsorley, how are you doing with your issue.

    I have been so busy catching up with my webdesign clients, thats why it has taken so long.

    ??

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Open NextGEN gallery from link or single image’ is closed to new replies.