Highslide photo album tutorial. During browsing web – I noticed one interesting library – highslide. This is not flash gallery as usual – but DHTML. Which mean that this is very customizable to anybody. Today I will show you how you can implement this library to create own photo gallery, and even several galleries at same page. This library not require jQuery, and its small in same time – so this is great. This is similar as lightbox (I made review long time ago) – very powerful too.
Here are links to demo and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Our demo will contain 3 blocks: first – just photo listing, second and third – slightly different photo galleries. So, download the example files and lets start coding !
Step 1. HTML
index.html
As usual, we start with the HTML. I don`t will scare you with huge code here, wut will split this to logic sections. First is header area:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="css/highslide.css" />
<script type="text/javascript" src="js/highslide-with-gallery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Creating photo galleries with highslide</title>
</head>
As you can see – I just linked 2 css files and 2 js files (library itself + our custom initialize code). Now, here are code for photo listing:
<!-- photo listing -->
<h4>Photo listing</h4>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, { outlineType: 'rounded-white' })" class="highslide" href="images/pic1.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic1.jpg" id="thumb1">
</a>
<div class="highslide-caption">
Full photo description #1. <a rel="nofollow" href="http://www.google.com/">Links</a> and another custom HTML allowed too.<br />
<div style="height: 34px">
<a href="#" class="lcontrol" onclick="return hs.next(this)">next<br /><small>right arrow key</small></a>
<a href="#" class="control" onclick="return hs.close(this)">close</a>
<a href="#" class="control" onclick="return false">move</a>
</div>
</div>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, { outlineType: 'rounded-white' })" class="highslide" href="images/pic2.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic2.jpg" id="thumb2">
</a>
<div class="highslide-caption">
Full photo description #2. <a rel="nofollow" href="#2">Links</a> and another custom HTML allowed too.<br />
<div style="height: 34px">
<a href="#" class="lcontrol" onclick="return hs.previous(this)" style="float:left; display: block">previous<br /><small>left arrow key</small></a>
<a href="#" class="lcontrol" onclick="return hs.next(this)">next<br /><small>right arrow key</small></a>
<a href="#" class="control" onclick="return hs.close(this)">close</a>
<a href="#" class="control" onclick="return false">move</a>
</div>
</div>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, { outlineType: 'rounded-white' })" class="highslide" href="images/pic3.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic3.jpg" id="thumb3">
</a>
<div class="highslide-caption">
Full photo description #3. <a rel="nofollow" href="#3">Links</a> and another custom HTML allowed too.
</div>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, { outlineType: 'rounded-black', captionOverlay: { position: 'rightpanel'} })" class="highslide" href="images/pic4.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic4.jpg" id="thumb4">
</a>
<div class="highslide-caption">
Full photo description #4. <a rel="nofollow" href="#4">Links</a> and another custom HTML allowed too.
</div>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, { outlineType: 'rounded-black', captionOverlay: { position: 'rightpanel'} })" class="highslide" href="images/pic5.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic5.jpg" id="thumb5">
</a>
<div class="highslide-caption">
Full photo description #5. <a rel="nofollow" href="#5">Links</a> and another custom HTML allowed too.
</div>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, { outlineType: 'rounded-black', captionOverlay: { position: 'rightpanel'} })" class="highslide" href="images/pic6.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic6.jpg" id="thumb6">
</a>
<div class="highslide-caption">
Full photo description #6. <a rel="nofollow" href="#6">Links</a> and another custom HTML allowed too.
</div>
</div>
<div style="clear:both"></div>
Here we can see 6 added objects. First two – having extra controls buttons, for last 3 – I put description in vertical panel (at right). Make attention, that I using functions of object ‘hs’ on different events – this is instance of our highslide library. Now, here are code for first photo gallery:
<!-- photo gallery #1 -->
<h4>Photo gallery #1</h4>
<div class="gallery-examples highslide-gallery">
<div class="thumbwrapper">
<a onclick="return hs.expand(this, galleryOptions)" class="highslide" href="images/pic7.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic7.jpg">
</a>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, galleryOptions)" class="highslide" href="images/pic8.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic8.jpg">
</a>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, galleryOptions)" class="highslide" href="images/pic9.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic9.jpg">
</a>
</div>
</div>
<div style="clear:both"></div>
And for photo gallery:
<!-- photo gallery #2 -->
<h4>Photo gallery #2</h4>
<div class="gallery-examples highslide-gallery">
<div class="thumbwrapper">
<a onclick="return hs.expand(this, galleryOptions2)" class="highslide" href="images/pic10.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic10.jpg">
</a>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, galleryOptions2)" class="highslide" href="images/pic11.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic11.jpg">
</a>
</div>
<div class="thumbwrapper">
<a onclick="return hs.expand(this, galleryOptions2)" class="highslide" href="images/pic12.jpg">
<img title="Enlarge" alt="Enlarge" src="images/thumb_pic12.jpg">
</a>
</div>
</div>
Code for both galleries slightly different (I using different gallery options)
Step 2. CSS
Here are used CSS files for our demo:
css/style.css
/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
position:relative;
background-color:#fff;
width:700px;
overflow:hidden;
border:1px #000 solid;
margin:20px auto;
padding:20px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
div.thumbwrapper {
background: none repeat scroll 0 0 #F0EEE0;
border: 1px solid #AFAB8E;
float: left;
margin: 8px;
padding: 5px;
text-align: center;
width: 202px;
}
.control, .lcontrol {
float: right;
display: block;
margin: 0 5px;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: black !important;
}
.lcontrol {
float:left;margin-right:50px;
}
.lcontrol .small {
font-weight: normal; text-transform: none;
}
css/highslide.css
That one CSS file belong to our library (this file available in package).
Step 3. JS
Now, its time to check how we initializing our galleries:
js/highslide-with-gallery.js
This is library file, and its always available in package
js/main.js
hs.showCredits = 0; //Whether to show a "Powered by..." label in the upper left corner.
hs.padToMinWidth = true; //On narrow images, pad the width of the expander to the minWidth to make room for the caption.
hs.graphicsDir = 'css/graphics/'; //The path to the directory where your graphics are.
// The gallery example on the front page
var galleryOptions = {
slideshowGroup: 'gallery',
wrapperClassName: 'dark',
dimmingOpacity: 0.8,
align: 'center',
transitions: ['expand', 'crossfade'],
fadeInOut: true,
wrapperClassName: 'borderless floating-caption',
marginLeft: 100,
marginBottom: 80,
numberPosition: 'caption'
};
var galleryOptions2 = {
slideshowGroup: 'gallery2',
wrapperClassName: 'white',
outlineType: 'glossy-dark',
dimmingOpacity: 0.8,
align: 'center',
transitions: ['expand', 'crossfade'],
fadeInOut: true,
wrapperClassName: 'borderless floating-caption',
marginLeft: 100,
marginBottom: 80,
numberPosition: 'caption'
};
if (hs.addSlideshow) hs.addSlideshow({
slideshowGroup: ['gallery','gallery2'], // in case if need apply this only to defined group
interval: 2000,
repeat: true,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
First important things is: hs.graphicsDir = ‘css/graphics/’;
This mean that all extra graphic-resources will taked from this folder. Here are icons for different controls (for different styles). So I advice you just to get this folder as is (whole folder optimized too – about 200kb).
All rest code or very easy to understand (its names easily guessable) – addition, I put several comments in code too
Full list of options you can read here.
Step 4. Images
All our images located in ‘images’ folder. Here are thumb images (thumb_pic1.jpg, thumb_pic2.jpg .. thumb_pic12.jpg) till thumb_pic12.jpg and full-size images too(pic1.jpg, pic2.jpg .. pic12.jpg)
Live Demo
Conclusion
I hope that today we made perfect galleries. Highslide is great library, if you will learn it – it will open to you new features. As example – you can use this library and for images, and also for any custom content like text, videos, flash embeds, more – content possible to load with AJAX too. Good luck in your projects!
Its too good demo. Also used in application me & my friends.
Do you have any idea how can I add caption inside photo gallery #2?
Hi yvonne,
Basically, you can use the same way:
<div class="highslide-caption">Your caption text</div>