SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,065
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple image gallery

    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,065
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webgypsy View Post
    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.


    Code:
    <!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 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?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,065
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code JavaScript:
    <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?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,065
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webgypsy View Post
    How are you going to get your images in the database into that code?
    In the output:

    Code CFM:
    <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>
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •