web design

Simple jQuery fullscreen image gallery

The code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>malihu jQuery Image Gallery</title>
<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
html,body{height:100%;}
*{outline:none;}
body{margin:0px; padding:0px; background:#000;}
#toolbar{position:fixed; z-index:3; right:10px; top:10px; padding:5px; background:url(fs_img_g_bg.png);}
#toolbar img{border:none;}
#img_title{position:fixed; z-index:3; left:10px; top:10px; padding:10px; background:url(fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;}
#bg{position:fixed; z-index:1; overflow:hidden; width:100%; height:100%;}
#bgimg{display:none; -ms-interpolation-mode: bicubic;}
#preloader{position:relative; z-index:3; width:32px; padding:20px; top:80px; margin:auto; background:#000;}
#thumbnails_wrapper{z-index:2; position:fixed; bottom:0; width:100%; background:url(empty.gif); /* stupid ie needs a background value to understand hover area */}
#outer_container{position:relative; padding:0; width:100%; margin:40px auto;}
#outer_container .thumbScroller{position:relative; overflow:hidden; background:url(fs_img_g_bg.png);}
#outer_container .thumbScroller, #outer_container .thumbScroller .container, #outer_container .thumbScroller .content{height:170px;}
#outer_container .thumbScroller .container{position:relative; left:0;}
#outer_container .thumbScroller .content{float:left;}
#outer_container .thumbScroller .content div{margin:5px; height:100%;}
#outer_container .thumbScroller img{border:5px solid #fff;}
#outer_container .thumbScroller .content div a{display:block; padding:5px;}

.nextImageBtn, .prevImageBtn{display:block; position:absolute; width:50px; height:50px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;}
.nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;}
.nextImageBtn{right:0; background:#000 url(nextImgBtn.png) center center no-repeat;}
.prevImageBtn{background:#000 url(prevImgBtn.png) center center no-repeat;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
</head>
<body>
<div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/Universe_and_planets_digital_art_wallpaper_denebola.jpg" width="1680" height="1050" alt="Denebola" title="Denebola" id="bgimg" /></div>
<div id="preloader"><img src="ajax-loader_dark.gif" width="32" height="32" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="toolbar_fs_icon.png" width="50" height="50"  /></a></div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
  <div class="container">
      <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_denebola.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_lux.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a></div>
        </div>
      <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_dk.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_albireo.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_church.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_Decampment.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_moons.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_transitorius.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a></div>
        </div>
        <div class="content">
          <div><a href="images/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a></div>
        </div>
  </div>
</div>
</div>
</div>
<script>
//config
//set default images view mode
$defaultViewMode="full"; //full, normal, original
$tsMargin=30; //first and last thumbnail margin (for better cursor interaction) 
$scrollEasing=600; //scroll easing amount (0 for no easing) 
$scrollEasingType="easeOutCirc"; //scroll easing type 
$thumbnailsContainerOpacity=0.8; //thumbnails area default opacity
$thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out
$thumbnailsOpacity=0.6; //thumbnails default opacity
$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")

//cache vars
$thumbnails_wrapper=$("#thumbnails_wrapper");
$outer_container=$("#outer_container");
$thumbScroller=$(".thumbScroller");
$thumbScroller_container=$(".thumbScroller .container");
$thumbScroller_content=$(".thumbScroller .content");
$thumbScroller_thumb=$(".thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg=$("#bgimg");
$img_title=$("#img_title");
$nextImageBtn=$(".nextImageBtn");
$prevImageBtn=$(".prevImageBtn");

$(window).load(function() {
  $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
  if($defaultViewMode=="full"){
    $toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
  } else {
    $toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
  }
  ShowHideNextPrev($nextPrevBtnsInitState);
  //thumbnail scroller
  $thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
  sliderLeft=$thumbScroller_container.position().left;
  sliderWidth=$outer_container.width();
  $thumbScroller.css("width",sliderWidth);
  var totalContent=0;
  fadeSpeed=200;
  
  var $the_outer_container=document.getElementById("outer_container");
  var $placement=findPos($the_outer_container);
  
  $thumbScroller_content.each(function () {
    var $this=$(this);
    totalContent+=$this.innerWidth();
    $thumbScroller_container.css("width",totalContent);
    $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
  });

  $thumbScroller.mousemove(function(e){
    if($thumbScroller_container.width()>sliderWidth){
        var mouseCoords=(e.pageX - $placement[1]);
        var mousePercentX=mouseCoords/sliderWidth;
        var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
        var thePosA=mouseCoords-destX;
        var thePosB=destX-mouseCoords;
        if(mouseCoords>destX){
          $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
        } else if(mouseCoords<destX){
          $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
        } else {
        $thumbScroller_container.stop();  
        }
    }
  });

  $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
  $thumbnails_wrapper.hover(
    function(){ //mouse over
      var $this=$(this);
      $this.stop().fadeTo("slow", 1);
    },
    function(){ //mouse out
      var $this=$(this);
      $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
    }
  );

  $thumbScroller_thumb.hover(
    function(){ //mouse over
      var $this=$(this);
      $this.stop().fadeTo(fadeSpeed, 1);
    },
    function(){ //mouse out
      var $this=$(this);
      $this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
    }
  );

  //on window resize scale image and reset thumbnail scroller
  $(window).resize(function() {
    FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
    $thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); 
    var newWidth=$outer_container.width();
    $thumbScroller.css("width",newWidth);
    sliderWidth=newWidth;
    $placement=findPos($the_outer_container);
  });

  //load 1st image
  var the1stImg = new Image();
  the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
  the1stImg.src = $bgimg.attr("src");
  $outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));
  $outer_container.data("prevImage",$(".content").last().find("a").attr("href"));
});

function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
  $this.fadeOut("fast",function(){
    $this.attr("src", "").attr("src", imgSrc); //change image source
    FullScreenBackground($this,imageWidth,imageHeight); //scale background image
    $preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
    var imageTitle=$img_title.data("imageTitle");
    if(imageTitle){
      $this.attr("alt", imageTitle).attr("title", imageTitle);
      $img_title.fadeOut("fast",function(){
        $img_title.html(imageTitle).fadeIn();
      });
    } else {
      $img_title.fadeOut("fast",function(){
        $img_title.html($this.attr("title")).fadeIn();
      });
    }
  });
}

//mouseover toolbar
if($toolbar.css("display")!="none"){
  $toolbar.fadeTo("fast", 0.4);
}
$toolbar.hover(
  function(){ //mouse over
    var $this=$(this);
    $this.stop().fadeTo("fast", 1);
  },
  function(){ //mouse out
    var $this=$(this);
    $this.stop().fadeTo("fast", 0.4);
  }
);

//Clicking on thumbnail changes the background image
$("#outer_container a").click(function(event){
  event.preventDefault();
  var $this=$(this);
  GetNextPrevImages($this);
  GetImageTitle($this);
  SwitchImage(this);
  ShowHideNextPrev("show");
}); 

//next/prev images buttons
$nextImageBtn.click(function(event){
  event.preventDefault();
  SwitchImage($outer_container.data("nextImage"));
  var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
  GetNextPrevImages($this);
  GetImageTitle($this);
});

$prevImageBtn.click(function(event){
  event.preventDefault();
  SwitchImage($outer_container.data("prevImage"));
  var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
  GetNextPrevImages($this);
  GetImageTitle($this);
});

//next/prev images keyboard arrows
if($keyboardNavigation=="on"){
$(document).keydown(function(ev) {
    if(ev.keyCode == 39) { //right arrow
        SwitchImage($outer_container.data("nextImage"));
    var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
    GetNextPrevImages($this);
    GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    } else if(ev.keyCode == 37) { //left arrow
        SwitchImage($outer_container.data("prevImage"));
    var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
    GetNextPrevImages($this);
    GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    }
});
}

function ShowHideNextPrev(state){
  if(state=="hide"){
    $nextImageBtn.fadeOut();
    $prevImageBtn.fadeOut();
  } else {
    $nextImageBtn.fadeIn();
    $prevImageBtn.fadeIn();
  }
}

//get image title
function GetImageTitle(elem){
  var title_attr=elem.children("img").attr("title"); //get image title attribute
  $img_title.data("imageTitle", title_attr); //store image title
}

//get next/prev images
function GetNextPrevImages(curr){
  var nextImage=curr.parents(".content").next().find("a").attr("href");
  if(nextImage==null){ //if last image, next is first
    var nextImage=$(".content").first().find("a").attr("href");
  }
  $outer_container.data("nextImage",nextImage);
  var prevImage=curr.parents(".content").prev().find("a").attr("href");
  if(prevImage==null){ //if first image, previous is last
    var prevImage=$(".content").last().find("a").attr("href");
  }
  $outer_container.data("prevImage",prevImage);
}

//switch image
function SwitchImage(img){
  $preloader.fadeIn("fast"); //show preloader
  var theNewImg = new Image();
  theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
  theNewImg.src = img;
}

//get new image dimensions
function CreateDelegate(contextObject, delegateMethod){
  return function(){
    return delegateMethod.apply(contextObject, arguments);
  }
}

//new image on load
function theNewImg_onload(){
  $bgimg.data("newImageW",this.width).data("newImageH",this.height);
  BackgroundLoad($bgimg,this.width,this.height,this.src);
}

//Image scale function
function FullScreenBackground(theItem,imageWidth,imageHeight){
  var winWidth=$(window).width();
  var winHeight=$(window).height();
  if($toolbar.data("imageViewMode")!="original"){ //scale
    var picHeight = imageHeight / imageWidth;
    var picWidth = imageWidth / imageHeight;
    if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
      if ((winHeight / winWidth) < picHeight) {
        $(theItem).attr("width",winWidth);
        $(theItem).attr("height",picHeight*winWidth);
      } else {
        $(theItem).attr("height",winHeight);
        $(theItem).attr("width",picWidth*winHeight);
      };
    } else { //normal size image mode
      if ((winHeight / winWidth) > picHeight) {
        $(theItem).attr("width",winWidth);
        $(theItem).attr("height",picHeight*winWidth);
      } else {
        $(theItem).attr("height",winHeight);
        $(theItem).attr("width",picWidth*winHeight);
      };
    }
    $(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
    $(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
  } else { //no scale
    $(theItem).attr("width",imageWidth);
    $(theItem).attr("height",imageHeight);
    $(theItem).css("margin-left",(winWidth-imageWidth)/2);
    $(theItem).css("margin-top",(winHeight-imageHeight)/2);
  }
}

//Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
  $toolbar.data("imageViewMode", theMode);
  FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
  if(theMode=="full"){
    $toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
  } else {
    $toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
  }
}

//function to find element Position
  function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
      curleft = obj.offsetLeft
      curtop = obj.offsetTop
      while (obj = obj.offsetParent) {
        curleft += obj.offsetLeft
        curtop += obj.offsetTop
      }
    }
    return [curtop, curleft];
  }
</script>
</body>
</html>

Pages: 1 2


324 Comments

Post a comment

Comments pages: 1 4 5 6

  1. Bhavesh Hirani
    Posted on September 17, 2014 at 09:40 Permalink

    Hey Malihu,

    Firstly, I love this plugin. And its very important for the temple website I’m designing. But there’s some modification I need to do. I tried understanding the code and the css as well but no luck. I want to limit the div with class container to fit inside the screen. I have integrated another javascript file to allow user to swipe through the thumbnails. This script creates buttons so that desktop users can scroll through the thumbnails using these arrows(buttons). So the main problem is limiting the width of the div with class container to the screen width of the device.

    Thanks for the plugin and thanks in advance for your support.

    Reply
  2. Esther
    Posted on September 13, 2014 at 13:17 Permalink

    Hi, Awesome slider and thanks for sharing.
    Isn’t possible to add “play & pause button”? I’m use this to creating my photo gallery. Hope you can help.

    Reply
  3. mauricio
    Posted on May 29, 2014 at 00:18 Permalink

    GREAT CODE! , one question, it’s possible center thumbs, my gallery it’s only 3 photos, thks!!!

    Reply
  4. shaikhshabaz
    Posted on May 27, 2014 at 12:08 Permalink

    PLz guide me how to coneect this template contact form directly to the specified email address……

    Reply
  5. shaikhshabaz
    Posted on May 27, 2014 at 12:05 Permalink

    Hello ,plzzzz help me out .I had used yor Excellent Template for my client .but as if not I cannot able to connect Contact Form Directly to Email,Outlook is opening..Plz help me out..

    Reply
  6. Prasanth
    Posted on April 10, 2014 at 12:41 Permalink

    Thank You Very Mush keep going……………………

    Reply
  7. Mr. Hogarth
    Posted on March 12, 2014 at 11:32 Permalink

    This is an awesome blog post, this image slider looks just awesome that I created and put on my site.

    Reply
  8. miha
    Posted on February 19, 2014 at 00:29 Permalink

    It would be nice if you can have a link to every image in the gallery, because there is only a link to the gallery, but a link to single images would be nice.
    it would be also great it there was a possibility to have different gallery categories

    Reply
  9. Zorrek
    Posted on February 13, 2014 at 10:37 Permalink

    This is NOT fullscreen like I hoped! It’s merely full window. Dissapointing!

    Reply
  10. Zahid Hasan
    Posted on February 6, 2014 at 18:24 Permalink

    How do I hide the thumbnail completely? Remove it from the entire slider altogether?

    Reply
    • Zahid Hasan
      Posted on February 6, 2014 at 18:28 Permalink

      Also, is there anyway to enable Autoplay within the script?

      Reply
  11. Peter
    Posted on October 23, 2013 at 13:55 Permalink

    Is there any way to check if an image comes in vertical format and then bypass the image scaling block so such images will be displayed fully (not scaled)?

    Thanks for your reply!

    Reply
  12. darkfalco
    Posted on October 14, 2013 at 04:34 Permalink

    Hello Malihu, first of all, thanks.
    I mixed version 1 and version 2, but I’m having an issue with the “bgimg” display tag, when I load the website or click a thumbnail, the style gets to “display:none;”. Is there a way to fix this within the “gallery.js”?

    Thanks in advance.

    Reply
    • darkfalco
      Posted on October 15, 2013 at 01:27 Permalink

      I did a workaround just set the background style as !important on the CSS file…

      At the moment I’m having issues with:
      When an image is clicked it doesn’t fade in or fade out, just quick change.

      Where in the code can I check this, thanks.

      Reply
  13. Lem
    Posted on September 28, 2013 at 15:44 Permalink

    Hi
    Is there any way changing the size of the thumbnails??
    Thanks

    Reply
  14. Khush
    Posted on September 20, 2013 at 17:08 Permalink

    Hi there, great work on this gallery. The only thing I find that would make this really perfect is the ability to sort the images. Right now I find that they are displayed based on file name and not based on the order in which they were added. Is it possible to make the images display in the order that that they were uploaded? ie the latest images show first and the older ones display later? Thanks in advance.

    Reply
  15. T
    Posted on August 21, 2013 at 02:35 Permalink

    I have tried to create a separate JS sheet for this great design – but i cannot separate the code from the html page and keep it functional. Wanted to use in multiple pages with one js sheet download for efficiency. Can the js code be done in a separate .js sheet? And yes I have deleted the in my attempts – nothing but js code on the page. In my attempts – the scroll bar appears but not the background image.

    Can anyone help?

    Thank You

    Reply
    • Jaime
      Posted on September 16, 2013 at 01:41 Permalink

      T:
      Put the call to the .js file at the end of the page, before the ending body tag

      Reply
      • T
        Posted on November 3, 2013 at 18:21 Permalink

        Tried it – could not get it to work – have you tried this? If yes, and it works let me know I will happily retry.
        on page script is the only way I could get it to function

        Thanks

        Reply
  16. Chris
    Posted on July 24, 2013 at 23:54 Permalink

    Thank you for your great work!

    I modified the code so I could have the large image link to a specific page based on a custom attribute added to the thumbnail image (attr = data-link).

    Here’s the updated JQuery code if someone is interested:
    http://pastebin.com/nyLTu07y

    The only things that would need to change in the HTML example is you would have to wrap the large image in the #bg div in an <a href="" class="parent-link"> tag and then add a data-link attribute with your URL to the thumbnail image like <img src="your-thumbnail.jpg" alt="alt" title="title" data-link="link-to-your-page.html">

    Reply
  17. Tomas
    Posted on July 17, 2013 at 00:34 Permalink

    Hi Malihu

    AWESOME Gallery!

    Is it possible to have more than one gallery on the same site… is there a good solution for this… ?

    Cheers, T

    Reply
  18. Hugo
    Posted on May 28, 2013 at 03:26 Permalink

    Is it posible to obtain the images path from a sql database?

    Reply
    • Hugo
      Posted on May 30, 2013 at 19:58 Permalink

      I already resolve how to get the path from my database and use it in the img, when I click on the next button change to the next picture, when I get to the last picture and click next it show me the first picture but when you click next again show the first again and again.

      Reply
      • Hugo
        Posted on May 30, 2013 at 20:14 Permalink

        I’m sorry but I forgot to include part of the code
        <div class="content"> <div><a href= <%= photo1 %> ><img src=<%=Session("Foto1")%> title="David Auto Sales" alt="" class="thumb" /></a></div> </div> <div class="content"> <div><a href= <%= photo2 %>><img src= <%= photo2 %> title="David Auto Sales" alt="" class="thumb" /></a></div> </div>

        Reply
  19. Daniel
    Posted on April 22, 2013 at 20:28 Permalink

    AMAZING THANK YOU

    Reply
  20. Without believes
    Posted on April 18, 2013 at 00:46 Permalink

    Hi,

    This is AMAZING thank you. I was just wondering, is there a way NOT to enlarge photos that are not big enough by default to fill the screen. Currently, smaller pictures just get enlarged (and so become blurry)

    thank you

    Reply
    • malihu
      Posted on April 18, 2013 at 00:48 Permalink

      You can set the $defaultViewMode to “normal” or “original” in the first line of the script.

      Reply
      • Without Believes
        Posted on May 2, 2013 at 07:59 Permalink

        Hi,

        thank you for the answer. I was more referring to a case, where we have 10 images in the gallery 8 are big enough to be fullscreen, but 2 are small (800×600).

        Reply

Comments pages: 1 4 5 6

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>

css.php