donboe
February 13, 2011, 10:29am
1
I’m looking for a very simple image gallery solution (no lightbox or something other fance) with a large image and a x amount of thumbnails at one off the sides, where the big image change whenever another thumbnail is clicked, without page refresh. ( a fade transition would be nice)!
Which Plugin, preferably as light as possible, is the most suitable for this task?
Thank you in advance
donboe
February 13, 2011, 11:12am
2
This is the code I posted recently to a similar question. You don’t need any jquery or plug-in fancy-shmancy stuff. Just plain old javascript. The enlargement images fade-in for good measure when you click a thumbnail.
Just enter the thumb paths and a description in the picData array and the code does the rest. Edit the css and layout to suit.
<!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">
<head>
<title></title>
<style type="text/css">
#ulThumbs {
clear: both;
list-style-type: none
}
#ulThumbs li {
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline
}
#imgEnlargeContainer {
width: 50%;
float: left
}
#descContainer {
width: 50%;
float: right
}
#enlargeContainer {
opacity: 0;
filter:alpha(opacity=0)
}
</style>
<script type="text/javascript">
var thumbMaxWidth = 100;
var thumbMaxHeight = 100;
//preload the images
var picData = [
['num1.jpg','description 1'],
['num2.jpg','description 2'],
['num3.jpg','description 3'],
['num4.jpg','description 4'],
['num5.jpg','description 5']
];
picO = new Array();
for(i=0; i < picData.length; i++){
picO[i] = new Image();
picO[i].src = picData[i][0];
}
var fadeTimer;
function showEnlargement(picNum){
if(fadeTimer){
clearInterval(fadeTimer);
curOpac = 0;
setOpacityCSS();
}
imgEnlargeO.src = picO[picNum].src;
descContainerO.innerHTML = picData[picNum][1];
fadeTimer = setInterval(setOpacity,100);
}
var curOpac = 0;
var speed = 0.2;
function setOpacity() {
curOpac = curOpac + speed;
if(curOpac <= 10){
setOpacityCSS();
}
}
function setOpacityCSS(){
if(typeof(enlargeContainerO.style.opacity) == 'string'){
enlargeContainerO.style.opacity = curOpac/10;
} else {
enlargeContainerO.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
}
}
window.onload=function(){
//create the thumbnails
var ulThumbsO = document.getElementById('ulThumbs');
var thumbDims = new Array();
for(i=0; i < picO.length; i++){
liO = document.createElement('li');
imgO = document.createElement('img');
imgO.src = picO[i].src;
thumbDims = calcNewDimensions(picO[i].width, picO[i].height, thumbMaxWidth, thumbMaxHeight);
imgO.width = thumbDims['width'];
imgO.height = thumbDims['height'];
imgO.num = i;
imgO.onclick=function(){
showEnlargement(this.num);
}
liO.appendChild(imgO);
ulThumbsO.appendChild(liO);
}
enlargeContainerO = document.getElementById('enlargeContainer');
imgEnlargeO = document.getElementById('imgEnlarge');
descContainerO = document.getElementById('descContainer');
//set a default random enlargement and description
var picNum = Math.floor(Math.random()*picData.length);
showEnlargement(picNum);
}
//-------------------------------------------
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
</script>
</head>
<body>
<div id="enlargeContainer">
<div id="imgEnlargeContainer">
<img id="imgEnlarge" src="" alt="" />
</div>
<div id="descContainer"></div>
</div>
<ul id="ulThumbs"></ul>
</body>
</html>
Hi webgypsy. Thank you for the reply. This could be very helpful indeed
donboe
February 13, 2011, 12:08pm
3
Hi webgypsy. I definitely gonna have a look at this later on because it looks okay to me. I needed a quick solution for the sake of a presentation I have later on today. For the sake of that I found this:
<script type="text/javascript">
$(document).ready(function(){
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
Do you have an idea how I can add fade transition to the big images?
donboe
February 13, 2011, 12:29pm
4
In the output:
<div id="main_view">
<cfoutput query="getPhotos">
<img src="property_photos/featured/#getPhotos.featured#" alt="" width="400" height="300" />
</cfoutput>
</div>
<ul class="thumbs">
<cfoutput query="getPhotos">
<li><a href="property_photos/featured/#getPhotos.featured#"><img src="property_photos/thumbnails/#getPhotos.thumbnail#" alt="" /></a></li>
</cfoutput>
</ul>
One question though. Javascript is not really my strongest point so I have one question! i see you define the image in an array within Javascrip. My images, though are coming from a database. So I would my Javascript look like in that case?