Essentially I want users to be able to click on an single image, have it open in a lightbox and

them have the ability to ip through images. I thought perhaps placing an Image Block, and

Open gallery in a lightbox? - Squarespace Answers

linking to a gallery, but no lightbox option that way.

Each of the images in the right would open up a lightbox. From there users could ip back and

01/12/15 15:48

6
6

im

li

forth through a number of images.

As

Is this possible? Thanks for any help.

Se
image

takk

gallery

lightbox

La

Asked May 11 '13 at 16:00 by brightpavilions 11114

Re
Did you gure out a solution to this?

Ho
Ga
de

AaronCube (Aug 14 '13 at 00:41)

I want to know the answer to this too. Anybody?

Fu
ga

jwpine (Apr 20 '14 at 23:30)

Ar
ga
Sq

I started working on this with some custom javascript and css, and it is possible to do. I didn't
bother nishing the project/example, but might do so in the future. I'm guessing there's

Cl
op
ga

probably a jQuery implementation of a lightbox that would be easier to insert than custom
coding it myself. It's a shame there doesn't seem to be a way to do this with the templates and
pages available from squarespace. I think a lot of people would like a feature like this.

Ho
an

Sorry, this isn't really an answer. I'm subscribed to this topic now, so if enough people keep
asking for it, I might eventually get around to implementing a custom solution.

Lig
wi

Bernard West (Apr 21 '14 at 00:26)

Ho
de

hey please help! what did you do to get this to work? i want the same thing!!!
i'm using the template wells, and i want my gallery slideshow to be a lightbox as well, and

Ho
he

open into a larger image when clicked...

Ho
bu

i can't nd what to do online right now and after 15 minutes of searching i nally was brought
to your question... but NO answer ahhaha..

Ho
Av

goldbergm6 (May 18 '14 at 23:18)

Hi,
I didn't get it to work - at least not with the squarespace gallery block.
Best way at the moment is mentioned above, implementing a JQuery lightbox/gallery. Just do a
google search to nd a solution that does what you need - although implementing it is not
always straight forward or very easy.
Hopefully squarespace just add this function to the gallery block sometime in the future.
Cheers.

http://answers.squarespace.com/questions/10663/open-gallery-in-a-lightbox

Page 1 of 7

3. Change Thumbnail per row to 1

4. Change
padding
to 0 (otherwise
Open gallery in a lightbox?
- Squarespace
Answers

if you add text, itll be awkwardly far from your Image

01/12/15 15:48

Block)
5. Enable the lightbox, and hit save

Code implementation Steps

6. Under Settings > Advanced > Code Injection, make sure you have jQuery referenced:
<script(src="https//code.jquery.com/jquery6latest.min.js"></script>
7. In your gallery page, go to Advanced > Code Injection, paste the following:
<script>$(function()({
(($('.sqs6gallery6design6grid').each(function(index,(value)({
(((($(this).find('.slide').not(":eq(0)").css('display',('none');
((});
});
</script>
The 0 in the eq(0) can be replaced with the number of the image you would like the
slideshow to start from in the gallery. The default for most my galleries is 0.
8. Implement this for however many lightbox galleries youd like to have on your page. Just
remember, the design page wont execute the code, so youll have to design around ALL
the loaded images, but with a single image in mind.
Answered Dec 20 '14 at 02:47 by HonestLai 512
link

If anyone can gure out why this doesn't work in mobile mode, please let me know
HonestLai (Dec 21 '14 at 14:20)

No idea what you mean dude. Your website works ne on mobile. And I see no reason why it
wouldn't. Simple jQuery / CSS stu there.
Just keep in mind you should use HTTPS on including the jquery there.
Since I'm here, I "ask" you why not making it work for every block in one line? I've successfully
used this one:
$(function (){ $('.sqs-gallery-design-grid').each(function(index, value) {
$(this).nd('.slide').not(":eq(0)").css('display','none'); }); });
Caue (Feb 04 at 16:45)

Nice one! I'm just bookmarking this again, as I might implement this on my own website, and
also so I can direct people asking the same question to this answer.
What template are you using, HonestLai?
Bernard West (Feb 05 at 00:02)

I'm using the Wells template and am having some trouble getting this to work. Has anyone
http://answers.squarespace.com/questions/10663/open-gallery-in-a-lightbox

Page 2 of 7

2. Double click the block to open the Edit Gallery box.

Open gallery in a lightbox?
Squarespace
3. In- the
top rightAnswers
corner,

click Design.

01/12/15 15:48

4. Click the Gallery Design dropdown menu and choose Grid, and at the bottom should be a
check box for Lightbox.
I'm using FIVE, so this option might not exist for the other templates.
Answered Jun 16 '14 at 18:44 by rdgao 212
link

It's been there all along, but yes, this is how it's done.
alanhouser (Jun 17 '14 at 08:59)

This thread was asking about having the option for a slideshow, not a grid.
rwohlfor (Jun 27 '14 at 17:28)

The question is asking for opening a lightbox from a single thumbnail while hiding all the other
images. This would show an entire gallery...
Jacquelyn Chastain (May 29 at 14:56)

Just an update on the best way I have found to do this. The solution involving adding code to
the header is oored as they are using the yui id block - which changes regularly. However there
is a much easier way without the code.

1. First o you need to add a gallery to your site (this can be not linked to but its the source
of your images).
2. In your gallery you can separate all your images by tags and categories. For instance
'owers', 'dogs' 'ducks' etc.
3. Wherever you want you lightbox gallery to appear add a summary block (summary
carousel is most likely what people want for this feed)
4. In your summary gallery settings you can choose which tags/categories appear in the
tag/category lter (in the display section) so it will only pull in what you want to show in
this lightbox
5. In Layout choose 1 image per row
This should do exactly what is described above - without any code!
Answered Mar 12 at 09:57 by jennielewis 111
link

Ah. Well, that explains why the previous solutions don't work haha. Unfortunately, I couldn't
gure out how to make your solution work either. Even when I used a summary block, clicking
on the image just brings me to to the gallery page, which you can also do much simpler by
adding an image with a clickthrough link that brings you to an unlinked page (for comparison:
https://ariella-axelbank-5wtz.squarespace.com/new-page-4-1/ top image is a summary
block, bottom is a standard linked page). Did I do something wrong? Any further ideas on how
to make it go to a lightbox instead?

http://answers.squarespace.com/questions/10663/open-gallery-in-a-lightbox

Page 3 of 7

jennielewis (Mar 12 at 12:27)

Open gallery in a lightbox? - Squarespace Answers

01/12/15 15:48

Regardless, I think we're trying to do dierent things. On your page, you can click through a
mini-gallery of images, but you can't expand them into a lightbox. I'm looking for a way to click
on a single image, and have it bring me to a lightbox (ideally) or gallery (if that's not possible)
where I can view multiple images at full size. The ideal is what HonestLai posted above
(http://www.redringstudio.com/photo-gallery/) clicking on the thumbnails of his galleries
brings you to a lightbox of multiple large images that you can scroll through without leaving
the initial page you were on.
EtCetera (Mar 12 at 12:45)

Also, you click the visitor access button it will ask you to type in a code and then you can still
view the page.
Thanks :)
EtCetera (Mar 12 at 12:45)
showing 5 of 10

Show All

Thanks for the tip @jennielewis. I was able to get it working, but can't gure out how to get rid
of the arrows in the top right corner. Anyone know how to remove these :) happy to code if
need be. http://www.theplankcompany.co.uk/hire/ (see "white folding chair" as example)
Answered Oct 19 at 23:09 by christineg 1

link

There is a much simpler CSS solution to this. Input this into your Custom CSS in the Design
section:

.sqs-gallery-block-grid .slide{

display:none; }
.sqs-gallery-block-grid :nth-child(1){ display:block; }

Answered Nov 08 at 17:29 by MajorMajor 1

link

Your Answer

http://answers.squarespace.com/questions/10663/open-gallery-in-a-lightbox

Page 4 of 7

Type the text

Privacy & Terms

Open gallery in a lightbox? - Squarespace Answers

01/12/15 15:48

Login/Signup to Post Your Answer

Squarespace Developer Network - Documentation - Community Q&A - Developer Ma

Main Website - About Us - Privacy Policy - Contact - Blog

ESTABLISHED 2004

http://answers.squarespace.com/questions/10663/open-gallery-in-a-lightbox

HANDMADE IN NYC

Page 5 of 7

Open gallery in a lightbox? - Squarespace Answers

http://answers.squarespace.com/questions/10663/open-gallery-in-a-lightbox

01/12/15 15:48

Page 6 of 7

Open gallery in a lightbox? - Squarespace Answers

http://answers.squarespace.com/questions/10663/open-gallery-in-a-lightbox

01/12/15 15:48

Page 7 of 7