2008-08-07

Creating a Lightbox Gallery

I received a question on how to create a lightbox gallery, so I decided to post step-by-step instructions. Before that, let me explain what's a lightbox gallery? A lightbox gallery is a group of pictures uploaded that acts as a slide show when activated. It's a useful tool for photographers/Etsy members who use a lot of images to potray their photos/products. That's why I frequently visit their sites as I've a great respect for them. They're so talented and gifted!!!




Finally, a lightbox gallery is a great solution. It will do the following:-
a- Visually attractive
b- Working inside a frame
c- Easy to organize photos/images and share them with others.

Login to your Dashboard> Layout> Edit Html. Check the Widget Expand Template check box. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}


Then, you need to copy the scripts source code below and paste between the closing b:skin tag and the closing head tag.
<script src='http://x5x5x1xx.googlepages.com/mootools.v1.11.js' type='text/javascript'/>
<script src='http://x5x5x1xx.googlepages.com/jd.gallery.js' type='text/javascript'/>
<link href='http://x5x5x1xx.googlepages.com/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>


Here comes the tricky part. You need to specify the div properties in your template. Failure to do so, no image will be displayed. For this example, let say we place the code in the sidebar. Copy and paste the following code.
<div id="myGallery">
<div class="imageElement">
<a class="open" href="POST LINK"></a>
<img src="YOUR IMAGE DATA URL" class="full"/> <h3>YOUR IMAGE TITLE</h3>
<p>YOUR IMAGE DESCRIPTION </p>
</div>
</div>


Note - If you would like to add more images, copy and paste the above code repeatedly.

9 comments:

Anonymous said...

Hi Ismail,
I have a Revolution City Theme (Wordpress theme) and I want to use it by Blogger.
Can you help me convert it into blogger XML. Thank you!
Hearing your answer.

Is said...

@Le Nguyen Ngoc
I'm not sure if the theme falls under WordPress Free Themes, if not I don't dare to violate copyright laws. You first have to provide credible evidence with respect to the issue. If you have any recommendations of other cool WordPress themes that would be worth porting over, please let me know. TQ

Anonymous said...

oh I see.
I'm having a Revolution City Theme that I've downloaded and saved.
I need it very much for my content blog.
If you don't agree, I don't want to force you.Thanks!

Is said...

@Le Nguyen Ngoc, you're missing the point of my note. The keyword here, ‘ethics’. FYI, the Revolution City theme is protected under Copyright Laws.

Jordan McClements said...

Sorry if this is a bit off topic, but..

I am offering the use of over 1000 photos, free of charge for use on your blog.

Please see the following blog post for further info:-

Free Photos For Your Blog

I hope this is of interest to you (and clear enough to follow as it is my first attempt at doing it properly).

Thanks!

Is said...

@Jordan, Thanks for the offer. Feel free to visit Jordan's Blog at http://money-from-photos.blogspot.com/

Anonymous said...

oh I'm sorry.
this is free wordpress theme: Visionary
Can you help me convert it? Thank you very much!

Is said...

@le nguyen ngoc, Finally,I've found their free old version and is released under Creative Commons Attribution-Share Alike 3.0 Unported License. I'll port this theme when I'm quite free to do so. In the mean time, just wait till I release it.

Anonymous said...

thank you
my email: anhhungrom0201@gmail.com

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L