View Full Version : Photo gallery

May 29th, 2010, 06:49 PM
Does anyone have any idea where i can find a place to get a gallery like the one on this site?



May 30th, 2010, 01:11 AM
Hello j05hr,
It looks like they are using a mixture of js and lightbox for that.
The scrolling thumbnails are done with http://jscroller2.markusbordihn.de/ and the pop up effect is from lightbox (http://www.huddletogether.com/projects/lightbox2/).

For further help you will probably need to dismantle their code to see how it's done.

Major Payne
May 30th, 2010, 12:37 PM
A few...

Free Photo Galleries:

Coppermine Photo Gallery: http://coppermine-gallery.net/
Gallery: http://gallery.menalto.com/
Full Screen Image Gallery (It automatically scales the image with kept aspect ratio to fill the browser background, with a flickr search engine, thumbnails, captions, preloader and some other goodies): http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/
12 Javascript Image Galleries: http://tutorialblog.org/12-javascript-image-galleries/
JavaScript Image Gallery and Slideshow: http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/
Galleria (JavaScript image gallery written in jQuery): http://devkick.com/lab/galleria/
Photo Gallery Fast Creator (Freeware): http://www.brothersoft.com/photo-gallery-fast-creator-250901.html
Free online photo gallery generator: http://www.creatingonline.com/webmaster/photo_gallery_generator.htm

PhotoJoy (Wallpaper Collages, 3D Screensavers, PhotoToy Widgets, Professional photos, easy to use):
Video Demo: http://www.photojoy.com/photojoy_demo.aspx?id=11299 (see video: http://www.youtube.com/watch?v=DLBuStr8OoY )

VisualLightBox is a free wizard program that helps you easily generate online photo albums, lightbox gallery with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code: http://lightbox2.com/lightbox2-how.html

Free Jalbum web album software: http://jalbum.net/
Lightbox 2: http://www.huddletogether.com/projects/lightbox2/
Shedding Some Light on Lightbox: http://www.webreference.com/programming/javascript/Lightbox/
Clean Photo Gallery Website Layout: http://psdvibe.com/2009/04/28/clean-photo-gallery-website-layout/

May 30th, 2010, 02:43 PM
Thanks for the list Major Payne, none seem to do what my client really wants it to do.

Excavator - How do you go about getting their PHP files that they use in their JS?

Thanks for the help,

May 30th, 2010, 03:53 PM
This is what I've got now, using their images for now as an example, it all seems to be working except for the scrolling thumbnails


This is my code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<title>Logo Lollipops for Gifts &amp; Marketing - Custom Candy Company</title>
<meta name="description" content="Custom Candy Company takes your designs or color photographs, and makes Lollipops and English Rock Candy that make every occasion great. Whether it's a trip to the ballpark, theme park, tradeshow or even weddings and birthday parties, these candies make the day more memorable." />
<meta name="keywords" content="logo lollipops, unique gift item, unique marketing, team marketing, seasonal treat, promotional lollipop" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="js/main.js"></script>
<script type="text/javascript" language="javascript" src="js/AjaxObject.js"></script>

<script type="text/javascript" language="javascript" src="js/swfobject.js"></script>
<script type="text/javascript" language="javascript" src="js/write_flash.js"></script>

<link href="css/styles.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
function submit_form(which) {
which.form.submitted.value = 'yes';
<div class="div_gallery_panel"><!-- GALLERY PANEL DIV -->
<div class="div_gallery_code"><!-- GALLERY CODE DIV -->
<!-- ///// GALLERY CODE GOES HERE ///// -->

<script type="text/javascript" language="javascript" src="modules/galleries/js/jscroller2-1.5.js"></script>
<link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/lightbox/js/prototype.js"></script>

<script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox/js/lightbox.js"></script>

<style type="text/css">
#scroller_container {
margin:2px 0 0 20px;
width: 410px;
height: 40px;
overflow: hidden;
/* CSS Hack Safari */
#dummy {;# }

#scroller_container {
overflow: auto;

<div class="home-picture" id="galjsb_largeimg"><a href="images/a-071.jpg" rel="lightbox[gallery]"><img src="images/a-071.jpg" alt="" width="410" height="240" border="0" /></a></div>
<div id="scroller_container">
<div class="jscroller2_left jscroller2_speed-20 jscroller2_mousemove jscroller2_ignoreleave" style="font-size:50px; white-space:nowrap; margin: 0;">
<img src="images/a-071.jpg" alt="" width="70" height="40" class="small-pictures" onclick="galjsb_clickthumb('a-071.jpg','')" style="cursor:pointer" />
<img src="images/Halloween.jpg" alt="" width="70" height="40" class="small-pictures" onclick="galjsb_clickthumb('Halloween.jpg','')" style="cursor:pointer" />
<script type="text/javascript">
var galjsb_index = 0;
var photos = new Array();
photos[0] = "a-071.jpg";
photos[1] = "Halloween.jpg";

function galjsb_clickthumb(photo, caption) {
var img_link = 'images/';
var lb_link = 'images/';
document.getElementById('galjsb_largeimg').innerHTML = '<a href="'+lb_link + photo+'" rel="lightbox[gallery]" title="'+caption+'"><img src="'+img_link + photo+'" alt="" width="410" height="240" border="0" /></a>';
<!-- ///// GALLERY CODE GOES HERE ///// -->

Which part of their site is it that does the scrolling thumnails and why isn't it working on mine?


Major Payne
May 30th, 2010, 04:11 PM
Thanks for the list Major Payne, none seem to do what my client really wants it to do.

Excavator - How do you go about getting their PHP files that they use in their JS?

Thanks for the help,
JoshGuess you didn't check them out as Lightbox2 does exactly that effect that you want. Also, you can use the free JAlbum software and the correct free skin to get that exact same effect. There are others using JQuery.

May 30th, 2010, 04:24 PM
Thanks for your reply, do you know what the free skin is as I couldn't find it on the JAlbum site?


Major Payne
May 31st, 2010, 04:24 AM
Might be one of these. I've forgotten which one I used at one time:


http://photourist.jalbum.net/BKLightBox%20Example/ (Click on "i" Icon. No photos shown, but may be what you want. This is more info: http://jalbum.net/skins/skin/BKLightBox