jquery-lightbox and move all the files and directories
into that to continue.
jquery-lightbox which has a whole bunch of stuff in it,
then that is fine and you can continue onto the next step.
jquery-lightbox then you must rename it
to jquery-lightbox to continue.
jquery-lightbox directory to somewhere on
your webserver
Be sure to always keep the entire jquery-lightbox directory
intact; this means if you were to only move some of the files instead of
moving the entire directory, then you would run into problems due to the
cross directory references would no longer be working.
If your page already has jQuery included then you can skip this step.
<!-- Include jQuery (Lightbox Requirement) --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
We will auto include everything else for you, so you only have to insert the below into your head tag.
<!-- Include Lightbox (Production) --> <script type="text/javascript" src="http://www.yoursite.com/somewhere/on/your/webserver/jquery-lightbox/scripts/jquery.lightbox.min.js"></script>
There are a few ways you can use jquery lightbox. Firstly, let's specify our gallery we will be using.
<div class="gallery"> <ul class="images"> <li class="image"> <a rel="lightbox-mygallery" href="http://farm2.static.flickr.com/1395/1116205566_42ce0841ab.jpg" title="tallest, deepest: Lovely photo of perth during the daytime."> <img src="http://farm2.static.flickr.com/1395/1116205566_42ce0841ab_s.jpg" height="75" width="75"> </a> </li> <li class="image"> <a rel="lightbox-mygallery" href="http://farm1.static.flickr.com/64/230712309_392c8d5bb7_o.jpg" title="Rolling Clouds"> <img src="http://farm1.static.flickr.com/64/230712309_392c8d5bb7_s.jpg" height="75" width="75"> </a> </li> </ul> </div>
All we need to do, is add a rel attribute which contains
lightbox to our gallery. We do this by changing:
<a href="...
To:
<a rel="lightbox-mygallery" href="...
Notice how we have -mygallery above, we do this to group
the images together in a lightbox. If you would like the lightbox to
only contain one image, you can use the simple:
<a rel="lightbox" href="...
And that's all you need to know, when you reload the page your gallery will now use the lightbox script.
But what if you would like to keep the html as it was, and not have to
add the lightbox rel attribute?
You can do this by running the following instead:
<script type="text/javascript">
$('a:has(img)').lightbox();
</script>
And that will do it for you! You can also change the text
a:has(img) which we use to whatever
selector you
would like to use for your lightboxes.
Remember for out gallery how we had titles and descriptions for our images. Let's refresh our memory:
<li class="image"> <a rel="lightbox-mygallery" href="http://farm2.static.flickr.com/1395/1116205566_42ce0841ab.jpg" title="tallest, deepest: Lovely photo of perth during the daytime."> <img src="http://farm2.static.flickr.com/1395/1116205566_42ce0841ab_s.jpg" height="75" width="75"> </a> </li>
Notice the title attribute on both the
a element? This stores our title and description.
We seperate the description by using a colon :, anything
before the colon is the title, and anything after is the description.
Descriptions and titles and entirely optional. You can have neither, just a title, or a title and description.
Fair request, we've made this easy, so all you have to do is set the
show_linkback option to false. This can be
done two ways.
The first and simplest way we can do it, is to use a url variable. So alter our jQuery Lightbox include in step 4 to:
<!-- Include Lightbox (Production) --> <script type="text/javascript" src="http://www.yoursite.com/some/where/jquery-lightbox/scripts/jquery.lightbox.min.js?show_linkback=false"></script>
The other more complicated way (which is sometimes preferable) is to set the option via javascript. Like so:
<script type="text/javascript">$(function(){
$.Lightbox.construct({
"show_linkback": false
});
});</script>
So pick one or the other, and apply the customisation and you won't have the linkback anymore!
You can do this too! So we are going to use the second style above, as there is a lot of text that could be translated. To translate from english to english we can use:
<script type="text/javascript">$(function(){
$.Lightbox.construct({
"text": {
// For translating
"image": "Image",
"of": "of",
"close": "Close X",
"closeInfo": "You can also click anywhere outside the image to close.",
"download": "Download.",
"help": {
"close": "Click to close",
"interact": "Hover to interact"
},
"about": {
"text": "jQuery Lightbox Plugin (balupton edition)",
"title": "Licenced under the MIT License.",
"link": "https://balupton.com/projects/jquery-lightbox"
}
}
});
});</script>
So there you have it, the left side is what is to be translated, and the right is the text that will be used as the translation!. It's that easy.
A whole bunch! But you will have to read the readme for all the details
and use cases! You can find the readme in your jquery lightbox download
as README.txt.
While not part of the lightbox script at all, here is some nice CSS so you can style your gallery like our example above.
/* Gallery Styling */
.gallery .image-title,
.gallery .image-description,
.gallery .image-author,
.gallery .image-link {
display:none;
}
.gallery
{
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: none;
}
.gallery ul.images
{
list-style-type: none;
border: none;
padding: none;
}
.gallery ul.images li.image
{
display: inline;
line-height: 0;
}
.gallery ul.images li.image a
{
text-decoration: none;
color: inherit;
cursor: pointer;
margin: 14px;
display: inline-block;
background: white;
padding: 3px;
line-height: 0;
-webkit-border-radius: 4px 4px;
-moz-border-radius: 4px 4px;
border-radius: 4px 4px;
-moz-box-shadow: 0px 0px 8px #AAA;
-webkit-box-shadow: 0px 0px 8px #AAA;
box-shadow: 0px 0px 8px #AAA;
-webkit-transition: -webkit-box-shadow 0.1s ease-out;
-moz-transition: -webkit-box-shadow 0.1s ease-out;
-o-transition: -webkit-box-shadow 0.1s ease-out;
transition: -webkit-box-shadow 0.1s ease-out;
}
.gallery ul.images li.image a img
{
border: none;
padding: none;
-webkit-border-radius: 4px 4px;
-moz-border-radius: 4px 4px;
border-radius: 4px 4px;
}
.gallery ul.images li.image a:hover
{
-moz-box-shadow: 0px 0px 8px #222;
-webkit-box-shadow: 0px 0px 8px #222;
box-shadow: 0px 0px 8px #222;
}
This work is powered by coffee and distributed for free. Donations are how we afford our coffee. Coffee is how we stay awake after our day job hours to work on things like this free open-source project which you're looking at. So go ahead, and get that warm fuzzy feeling knowing you just helped some poor fellow working after hours for free to buy his coffee. You only need to spare a few dollars, or as much as you feel this piece of work is worth. Thanks so much. Alternatively; if you are not in a donating mood, then spreading the word about this project on twitter, your blog, or whatever is just as good. Thanks a bunch, we appreciate the help deeply.
This work is licensed under a MIT License.