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!
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!
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.
I would still like to know how to have one image trigger a lightbox slideshow, like the Addons Screenshots buttons do.
well im pretty sure thats the addon c5 uses, so...
c5 doesn't use an addon, they code it in,
bummer - I was hoping to make this easy to add to a site...
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!
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!
yeah, i thought you wanted to show a gallery not one image.
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:
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:
...and then the jQuery would change in the same manner:
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 }); });
Viewing 15 lines of 16 lines. View entire code block.
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() {
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
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
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?
Any developers out there got plans to make such an add-on? Please?
@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.
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>
@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
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
My add-on can do what you want: http://www.concrete5.org/marketplace/addons/fluid-gallery1...
Demo:http://design.55websolutions.uk/fluid-gallery/single-thumbnail...
Demo:http://design.55websolutions.uk/fluid-gallery/single-thumbnail...
@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.
Your add-on looks very nice indeed. It certainly does what I need — much more, in fact. Thanks for bringing it to our attention.
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
http://www.concrete5.org/marketplace/addons/image-popup...
-Owen
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.
I will go and add it to my shopping cart.
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
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
http://www.concrete5.org/marketplace/addons/deluxe-image-gallery/...
its really good.