How do I do this: Link launches lightbox image collection ?

Permalink
Hi

I like how the "screenshots" icon on the Addon's pages launches the first photo in a collection of images. You then click the next arrow to go through them.

e.g.http://www.concrete5.org/marketplace/addons/extended-google-map/...

Can we do this with the C5 core install? Or is there a special addon for this?

Thanks!

malkau
View Replies: View Best Answer
12345j replied on at Permalink Best Answer Reply
12345j
malkau replied on at Permalink Reply
malkau
oops... if I marked this question as answered, I didn't mean to.

I would still like to know how to have one image trigger a lightbox slideshow, like the Addons Screenshots buttons do.
12345j replied on at Permalink Reply
12345j
well im pretty sure thats the addon c5 uses, so...
Mnkras replied on at Permalink Reply
Mnkras
c5 doesn't use an addon, they code it in,
malkau replied on at Permalink Reply
malkau
bummer - I was hoping to make this easy to add to a site...
malkau replied on at Permalink Reply
malkau
Thanks for your response - but from what I can see this addon is for displaying galleries in a page. You click on the image thumbnail to launch the slideshow.

What I am after is the ability to use one photo (or even a generic icon) to launch the lightbox.

Anyway, I've emailed the developer of that addon to see if that is possible.

Thanks again!
12345j replied on at Permalink Reply
12345j
yeah, i thought you wanted to show a gallery not one image.
jordanlev replied on at Permalink Reply
jordanlev
Hi,
Unfortunately the Deluxe Image Gallery does not do this (but thanks for the props 12345j).

If you want to implement something like this in your own site, you'd need to get into some javascript coding. If you want to use the "fancybox" (http://fancybox.net/ ) lightbox, for example, you would need to include its javascript files from your theme header. Then you could place an HTML block on your page and paste in some code like this:
<a id="mygallery" href="#" title="">Image gallery</a>
$(document).ready(function() {
  $("#mygallery").click(function() {
    $.fancybox([
      'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
      'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
      'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg'
    ], {
      'padding' : 0,
      'transitionIn'  : 'none',
      'transitionOut' : 'none',
      'type' : 'image',
      'changeFade' : 0
    });
  });


Note that you'll need to modify those url's to point to your actual images (if they're uploaded to your site, you can get their URL's by finding each one in the File Manager, clicking on their thumbnail there and choosing "Properties" -- one of the properties should be "Image URL" or something like that). Not as smooth as choosing a fileset from a block, but pretty easy to implement.

Good luck!

-Jordan

EDIT: Note that the code above is very rough and only works if there's only gallery on a page. If you're putting this into a block you're going to want to change it slightly so that it works when there's more than one of that block on the page. You could append the block ID in this case to the div id, like so:
<a id="mygallery<?php echo $bID; ?>" href="#" title="">Image gallery</a>

...and then the jQuery would change in the same manner:
$("#mygallery<?php echo $bID; ?>").click(function() {
jordanlev replied on at Permalink Reply
jordanlev
I also have some boilerplate code for basing an image gallery off of:
https://github.com/jordanlev/c5_designer_gallery...

One of the custom templates it includes for demo purposes is called "fancybox_one_thumb", which does this exact thing -- you could probably use it with very little modification to do what you want here. (But you should check out the README too by scrolling down a little on that page).

-Jordan
Dushka replied on at Permalink Reply
Dushka
I realize that five years have transpired since this question, but I would like to do what I think the original poster wanted to do — open a large lightbox slideshow from a single thumbnail image (as distinct from a gallery of thumbnail images) in a sidebar. I have checked all the 5.7 add-on sliders and cannot find any that do this.
Any developers out there got plans to make such an add-on? Please?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Dushka

The initial poster was looking for a lightbox gallery using multiple thumbnail images. Opening one image would allow you to view the next and previous thumbnail. In 5.7, this could be accomplished with Magnific Popup, which is included in the default install.
http://dimsemenov.com/plugins/magnific-popup/...

Opening a gallery from a single thumbnail, without thumbnails, could be done. Using the lightbox gallery, create one thumbnail and link to the full size image, for the rest of the images just include the link to the full size image. You could make the first thumbnail link visible and hide the rest.
<div class="popup-gallery">
    <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"></a>
    <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"></a>
    <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"></a>
    <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"></a>
    <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"></a>
    <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"></a>
</div>
Dushka replied on at Permalink Reply
Dushka
@MrKDilkington

Thanks for that. I don't fully understand what you mean, but I will play around with it. Exactly which file would I insert the above code into? Would I be right in thinking it would be
concrete/js/jquery-magnific-popups.js
Steevb replied on at Permalink Reply
Steevb
Dushka replied on at Permalink Reply
Dushka
@steevb

Your add-on looks very nice indeed. It certainly does what I need — much more, in fact. Thanks for bringing it to our attention.
OKDnet replied on at Permalink Reply
OKDnet
Did you see this add-on? I haven't used it, but it says it does it!
http://www.concrete5.org/marketplace/addons/image-popup...

-Owen
Dushka replied on at Permalink Reply
Dushka
Many thanks for pointing this out, Owen. Looking at the developer's description site I think you are right. I would not have realized the add-on has the ability to do what I want just based on the "sales blurb" in the C5 add-ons due to "nomenclature confusion". The sales blurb says only that it can pop up a "gallery", which I thought was a grid of images rather than a slideshow of images. (Gallery, slider, slideshow, carousel; popup, lightbox, overlay — they all make my head swim.)
I will go and add it to my shopping cart.
OKDnet replied on at Permalink Reply
OKDnet
I'm glad I was able to help.
I was just on the developer @pvernaglia site (so maybe that's why it hit me)
He has more info there

(as well as a great Concrete5 Sheet Sheet that is helpful for developers )
http://webli.us/cheatsheet/doku.php...

-Owen