Lightbox software - Post ID 296105

User 458539 Photo

Registered User
1,485 posts

Thanks guys

Wayan - I admit I'm not in the program but not sure how to set this up.
User 2699991 Photo

Registered User
3,656 posts
Online Now

Byron Tipping wrote:
Thanks guys

Wayan - I admit I'm not in the program but not sure how to set this up.

I will do a tutorial and put it up shortly

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2818159 Photo

Registered User
57 posts

I'm not a pro, not even close, but I found Fancybox to be pretty easy to use with SD.

It has a lot of options (see demos at link above), but is also easy to use "right out of the box". I found some of their instructions weren't quite right, so here's how I did it.

Instructions for noobs like me :P

1) Download and unzip the files from the link above and upload the entire folder to your host

2) Put these 3 lines of code in the footer of every page that you want to use Fancybox:
<script src=""></script>
<link href="fancybox/dist/jquery.fancybox.min.css" rel="stylesheet">
<script src="fancybox/dist/jquery.fancybox.min.js"></script>

**Note that I renamed the uploaded folder "fancybox" so make sure the path in the code above is correct for your folder name/location.**

3) Use a picture link or text link in SD with the following info:
HREF - will be path to the image/item you want to use - don't forget to upload those files to your host.

4) Add the following 2 custom attributes to your link (under "elements" tab of picture/text link) to the link
a) data-fancybox - "value" can be blank, or if you want to link images together for a slideshow/gallery, use a common value for each that you want to link
b) data-caption - "value" is whatever text you want for the images

That's it.

Here's how I used it on one of my sites:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.