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 webserverBe 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="http://www.yoursite.com/somewhere/on/your/webserver/jquery-lightbox/scripts/jquery-1.4.2.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 GNU Affero General Public License.",
"link": "http://www.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;
}
If anything isn't working the way you want it to, or if you would like to request a feature or provide praise or general feedback then be sure to click the feedback button to the right, or the "Get Support" link up the top of this page.
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. You can also give praise by clicking the feedback button or visiting our "Get Support" link. Thanks a bunch, we appreciate the help deeply.
This work is licensed under a GNU Affero General Public License.