This website uses cookies to personalise ads and to analyse traffic ok
web design

SIDEWAYS – jQuery fullscreen image gallery

Last updated on Nov 20, 2010 Originally published on September 12, 2010 by , under Templates & web apps.

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>SIDEWAYS jQuery fullscreen image gallery</title>
<style type="text/css">
<!--
html,body{height:100%}
body {margin:0; padding:0; background:#333 url(sw_page_bg.png); overflow:hidden; font-family:Helvetica, Arial, sans-serif; font-size:16px;}
/* custom fonts */
@font-face {
  font-family: 'eurof55-webfont';
  src: url('fonts/eurof55-webfont.eot');
  src: local('☺'), url('fonts/eurof55-webfont.woff') format('woff'), url('fonts/eurof55-webfont.ttf') format('truetype'), url('fonts/eurof55-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
  font-family: 'eurof35-webfont';
  src: url('fonts/eurof35-webfont.eot');
  src: local('☺'), url('fonts/eurof35-webfont.woff') format('woff'), url('fonts/eurof35-webfont.ttf') format('truetype'), url('fonts/eurof35-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
  font-family: 'graublauweb-webfont';
  src: url('fonts/graublauweb-webfont.eot');
  src: local('☺'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
}
.clear{clear:both;}
a:link,a:visited,a:hover{color:#ddd;}
a:hover{color:#fff; text-decoration:none;}
#bg{position:fixed; left:585px; top:0; width:100%; height:100%;}
#bgimg{display:none; cursor:pointer; -ms-interpolation-mode: bicubic;} /* special IE fix for resized images */
#preloader{position:absolute; z-index:2; width:140px; padding:20px; top:20px; left:50px; background:#000; color:#666; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:16px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#preloader img{margin-right:20px;}
#toolbar{display:inline-block; padding:4px 15px; margin:20px 15px; background:#262626 url(sw_btn_bg.png) repeat-x; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:12px; color:#fff; cursor:pointer;}
#outer_container{position:relative; margin:0; width:700px; padding:0 100px 0 0; z-index:2; background:url(empty.gif);} /* fucking IE needs a background value to understand hover area */
#customScrollBox{position:relative; overflow:hidden; background:url(sw_l_bg.png) repeat-y;}
#customScrollBox .container{position:relative; width:585px; top:0; float:left;}
#customScrollBox .content{clear:both;}
#customScrollBox .content h1{padding:5px; margin:10px; color:#fff; font-family:eurof55-webfont, Helvetica, Arial, sans-serif; font-size:48px;}
#customScrollBox .content h2{padding:5px; margin:10px 10px 0 10px; color:#fff; font-family:eurof35-webfont, Helvetica, Arial, sans-serif; font-size:24px;}
#customScrollBox .content p{padding:5px; margin:0 10px 10px 10px; color:#ddd; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; line-height:26px;}
.light{font-family:eurof35-webfont, Helvetica, Arial, sans-serif;}
.grey{color:#999;}
.lightgrey{color:#ddd;}
.s36{font-size:36px;}
.s24{font-size:24px;}
#customScrollBox a.thumb_link{position:relative; margin:0 0 1px 1px; display:block; float:left;}
#customScrollBox img{border:none;}
#customScrollBox a.thumb_link .selected{position:absolute; top:0; left:0; width:145px; height:91px; background:url(sw_thumb_selected.png) no-repeat; display:none;}
#dragger_container{position:relative; width:30px; height:580px; float:left; margin:10px 0 0 0; background:url(sw_dragger_bg.png) repeat-y center;}
#dragger{position:absolute; width:30px; height:59px; background:url(round_custom_scrollbar_bg.png) no-repeat center center; cursor:pointer;}
#arrow_indicator{position:absolute; z-index:1; width:50px; padding:10px; top:50%; margin-top:-25px; left:20px; background:url(sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none;}
#nextimage_tip{position:fixed; z-index:1; padding:0 20px; line-height:40px; color:#fff; height:40px; top:50%; margin-top:-20px; right:20px; background:url(sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif;}
.with_border{border:1px solid #000;}
.with_shadow{-moz-box-shadow:0 0 40px #000; -webkit-box-shadow:0 0 40px #000; box-shadow:0 0 40px #000;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
</head>

<body>
<div id="outer_container">
<div id="customScrollBox">
  <div class="container">
      <div class="content">
          <h1>SIDE<span class="lightgrey">WAYS</span> <br /><span class="light"><span class="grey"><span class="s36">JQUERY FULLSCREEN IMAGE GALLERY</span></span></span></h1>
            <p>A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS. <a href="http://manos.malihu.gr/sideways-jquery-fullscreen-image-gallery" target="_blank">Full post and download files.</a></p>
            <div id="toolbar"></div><div class="clear"></div>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_denebola.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_lux.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_dk.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_albireo.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_church.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_Decampment.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_moons.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_transitorius.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_denebola.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_lux.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_dk.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_albireo.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_church.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_Decampment.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_moons.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_transitorius.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_dk.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_albireo.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_church.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_Decampment.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_moons.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_transitorius.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_denebola.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_lux.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_dk.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_albireo.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_church.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_Decampment.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_transitorius.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a>
            <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg" class="thumb_link"><span class="selected"></span><img src="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a>
            <p class="clear"></p>
            <p>Created by <a href="http://manos.malihu.gr" target="_blank">malihu</a> and his cats on a hot summer day.</p>
        </div>
  </div>
    <div id="dragger_container"><div id="dragger"></div></div>
</div>
</div>
<div id="bg">
    <img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg" title="Supremus Lucernarium" id="bgimg" />
  <div id="preloader"><img src="ajax-loader_dark.gif" width="32" height="32" align="absmiddle" />LOADING...</div>
    <div id="arrow_indicator"><img src="sw_arrow_indicator.png" width="50" height="50"  /></div>
    <div id="nextimage_tip">Click for next image</div>
</div>
<script>
  //set default view mode
  $defaultViewMode="full"; //full (fullscreen background), fit (fit to window), original (no scale)
  //cache vars
  $bg=$("#bg");
  $bgimg=$("#bg #bgimg");
  $preloader=$("#preloader");
  $outer_container=$("#outer_container");
  $outer_container_a=$("#outer_container a.thumb_link");
  $toolbar=$("#toolbar");
  $nextimage_tip=$("#nextimage_tip");
  
$(window).load(function() {
  $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
  ImageViewMode($toolbar.data("imageViewMode"));
  //cache vars
  $customScrollBox=$("#customScrollBox");
  $customScrollBox_container=$("#customScrollBox .container");
  $customScrollBox_content=$("#customScrollBox .content");
  $dragger_container=$("#dragger_container");
  $dragger=$("#dragger");
  
  CustomScroller();
  
  function CustomScroller(){
    outerMargin=0;
    innerMargin=20;
    $customScrollBox.height($(window).height()-outerMargin);
    $dragger_container.height($(window).height()-innerMargin);
    visibleHeight=$(window).height()-outerMargin;
    if($customScrollBox_container.height()>visibleHeight){ //custom scroll depends on content height
      $dragger_container,$dragger.css("display","block");
      totalContent=$customScrollBox_content.height();
      draggerContainerHeight=$(window).height()-innerMargin;
      animSpeed=400; //animation speed
      easeType="easeOutCirc"; //easing type
      bottomSpace=1.05; //bottom scrolling space
      targY=0;
      draggerHeight=$dragger.height();
      $dragger.draggable({ 
        axis: "y", 
        containment: "parent", 
        drag: function(event, ui) {
          Scroll();
        }, 
        stop: function(event, ui) {
          DraggerOut();
        }
      });

      //scrollbar click
      $dragger_container.click(function(e) {
        var mouseCoord=(e.pageY - $(this).offset().top);
        var targetPos=mouseCoord+$dragger.height();
        if(targetPos<draggerContainerHeight){
          $dragger.css("top",mouseCoord);
          Scroll();
        } else {
          $dragger.css("top",draggerContainerHeight-$dragger.height());
          Scroll();
        }
      });

      //mousewheel
      $(function($) {
        $customScrollBox.bind("mousewheel", function(event, delta) {
          vel = Math.abs(delta*10);
          $dragger.css("top", $dragger.position().top-(delta*vel));
          Scroll();
          if($dragger.position().top<0){
            $dragger.css("top", 0);
            $customScrollBox_container.stop();
            Scroll();
          }
          if($dragger.position().top>draggerContainerHeight-$dragger.height()){
            $dragger.css("top", draggerContainerHeight-$dragger.height());
            $customScrollBox_container.stop();
            Scroll();
          }
          return false;
        });
      });

      function Scroll(){
        var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
        var draggerY=$dragger.position().top;
        targY=-draggerY*scrollAmount;
        var thePos=$customScrollBox_container.position().top-targY;
        $customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing
      }

      //dragger hover
      $dragger.mouseup(function(){
        DraggerOut();
      }).mousedown(function(){
        DraggerOver();
      });

      function DraggerOver(){
        $dragger.css("background", "url(round_custom_scrollbar_bg_over.png)");
      }

      function DraggerOut(){
        $dragger.css("background", "url(round_custom_scrollbar_bg.png)");
      }
    } else { //hide custom scrollbar if content is short
      $dragger,$dragger_container.css("display","none");
    }
  }

  //resize browser window functions
  $(window).resize(function() {
    FullScreenBackground("#bgimg"); //scale bg image
    $dragger.css("top",0); //reset content scroll
    $customScrollBox_container.css("top",0);
    $customScrollBox.unbind("mousewheel");
    CustomScroller();
  });
  
  //LargeImageLoad($bgimg);
});
  
  //loading bg image
  $bgimg.load(function() {
    LargeImageLoad($(this));
  });
  
  function LargeImageLoad($this){
    $preloader.fadeOut("fast"); //hide preloader
    $this.removeAttr("width").removeAttr("height").css({ width: "", height: "" }); //lose all previous dimensions in order to rescale new image data
    $bg.data("originalImageWidth",$this.width()).data("originalImageHeight",$this.height());
    if($bg.data("newTitle")){
      $this.attr("title",$bg.data("newTitle")); //set new image title attribute
    }
    FullScreenBackground($this); //scale new image
    $bg.data("nextImage",$($outer_container.data("selectedThumb")).next().attr("href")); //get and store next image
    if(typeof itemIndex!="undefined"){
      if(itemIndex==lastItemIndex){ //check if it is the last image
        $bg.data("lastImageReached","Y");
        $bg.data("nextImage",$outer_container_a.first().attr("href")); //get and store next image
      } else {
        $bg.data("lastImageReached","N");
      }
    } else {
      $bg.data("lastImageReached","N");
    }
    $this.fadeIn("slow"); //fadein background image
    if($bg.data("nextImage") || $bg.data("lastImageReached")=="Y"){ //don't close thumbs pane on 1st load
      SlidePanels("close"); //close the left pane
    }
    NextImageTip();
  }

  //slide in/out left pane
  $outer_container.hover(
    function(){ //mouse over
      SlidePanels("open");
    },
    function(){ //mouse out
      SlidePanels("close");
    }
  );
  
  //Clicking on thumbnail changes the background image
  $outer_container_a.click(function(event){
    event.preventDefault();
    var $this=this;
    $bgimg.css("display","none");
    $preloader.fadeIn("fast"); //show preloader
    //style clicked thumbnail
    $outer_container_a.each(function() {
        $(this).children(".selected").css("display","none");
      });
    $(this).children(".selected").css("display","block");
    //get and store next image and selected thumb 
    $outer_container.data("selectedThumb",$this); 
    $bg.data("nextImage",$(this).next().attr("href"));   
    $bg.data("newTitle",$(this).children("img").attr("title")); //get and store new image title attribute
    itemIndex=getIndex($this); //get clicked item index
    lastItemIndex=($outer_container_a.length)-1; //get last item index
    $bgimg.attr("src", "").attr("src", $this); //switch image
  }); 

  //clicking on large image loads the next one
  $bgimg.click(function(event){
    var $this=$(this);
    if($bg.data("nextImage")){ //if next image data is stored
      $this.css("display","none");
      $preloader.fadeIn("fast"); //show preloader
      $($outer_container.data("selectedThumb")).children(".selected").css("display","none"); //deselect thumb
      if($bg.data("lastImageReached")!="Y"){
        $($outer_container.data("selectedThumb")).next().children(".selected").css("display","block"); //select new thumb
      } else {
        $outer_container_a.first().children(".selected").css("display","block"); //select new thumb - first
      }
      //store new selected thumb
      var selThumb=$outer_container.data("selectedThumb");
      if($bg.data("lastImageReached")!="Y"){
        $outer_container.data("selectedThumb",$(selThumb).next()); 
      } else {
        $outer_container.data("selectedThumb",$outer_container_a.first()); 
      }
      $bg.data("newTitle",$($outer_container.data("selectedThumb")).children("img").attr("title")); //get and store new image title attribute
      if($bg.data("lastImageReached")!="Y"){
        itemIndex++;
      } else {
        itemIndex=0;
      }
      $this.attr("src", "").attr("src", $bg.data("nextImage")); //switch image
    }
  });
  
  //function to get element index (fuck you IE!)
  function getIndex(theItem){
    for ( var i = 0, length = $outer_container_a.length; i < length; i++ ) {
      if ( $outer_container_a[i] === theItem ) {
        return i;
      }
    }
  }
  
  //toolbar (image view mode button) hover
  $toolbar.hover(
    function(){ //mouse over
      $(this).stop().fadeTo("fast",1);
    },
    function(){ //mouse out
      $(this).stop().fadeTo("fast",0.8);
    }
  ); 
  $toolbar.stop().fadeTo("fast",0.8); //set its original state
  
  //Clicking on toolbar changes the image view mode
  $toolbar.click(function(event){
    if($toolbar.data("imageViewMode")=="full"){
      ImageViewMode("fit");
    } else if($toolbar.data("imageViewMode")=="fit") {
      ImageViewMode("original");
    } else if($toolbar.data("imageViewMode")=="original"){
      ImageViewMode("full");
    }
  });

  //next image balloon tip
  function NextImageTip(){
    if($bg.data("nextImage")){ //check if this is the first image
      $nextimage_tip.stop().css("right",20).fadeIn("fast").fadeOut(2000,"easeInExpo",function(){$nextimage_tip.css("right",$(window).width());});
    }
  }

  //slide in/out left pane function
  function SlidePanels(action){
    var speed=900;
    var easing="easeInOutExpo";
    if(action=="open"){
      $("#arrow_indicator").fadeTo("fast",0);
      $outer_container.stop().animate({left: 0}, speed,easing);
      $bg.stop().animate({left: 585}, speed,easing);
    } else {
      $outer_container.stop().animate({left: -710}, speed,easing);
      $bg.stop().animate({left: 0}, speed,easing,function(){$("#arrow_indicator").fadeTo("fast",1);});
    }
  }

//Image scale function
function FullScreenBackground(theItem){
  var winWidth=$(window).width();
  var winHeight=$(window).height();
  var imageWidth=$(theItem).width();
  var imageHeight=$(theItem).height();
  if($toolbar.data("imageViewMode")!="original"){ //scale
    $(theItem).removeClass("with_border").removeClass("with_shadow"); //remove extra styles of orininal view mode
    var picHeight = imageHeight / imageWidth;
    var picWidth = imageWidth / imageHeight;
    if($toolbar.data("imageViewMode")!="fit"){ //image view mode: full
      if ((winHeight / winWidth) < picHeight) {
        $(theItem).css("width",winWidth).css("height",picHeight*winWidth);
      } else {
        $(theItem).css("height",winHeight).css("width",picWidth*winHeight);
      };
    } else { //image view mode: fit
      if ((winHeight / winWidth) > picHeight) {
        $(theItem).css("width",winWidth).css("height",picHeight*winWidth);
      } else {
        $(theItem).css("height",winHeight).css("width",picWidth*winHeight);
      };
    }
    //center it
    $(theItem).css("margin-left",((winWidth - $(theItem).width())/2)).css("margin-top",((winHeight - $(theItem).height())/2));
  } else { //no scale
    //add extra styles for orininal view mode
    $(theItem).addClass("with_border").addClass("with_shadow");
    //set original dimensions
    $(theItem).css("width",$bg.data("originalImageWidth")).css("height",$bg.data("originalImageHeight"));
    //center it
    $(theItem).css("margin-left",((winWidth-$(theItem).outerWidth())/2)).css("margin-top",((winHeight-$(theItem).outerHeight())/2));
  }
}

//image view mode function - full or fit
function ImageViewMode(theMode){
  $toolbar.data("imageViewMode", theMode); //store new mode
  FullScreenBackground($bgimg); //scale bg image
  //re-style button
  if(theMode=="full"){
    $toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> FULL");
  } else if(theMode=="fit") {
    $toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> FIT");
  } else {
    $toolbar.html("<span class='lightgrey'>IMAGE VIEW MODE &rsaquo;</span> ORIGINAL");
  }
}

//preload script images
var images=["ajax-loader_dark.gif","round_custom_scrollbar_bg_over.png"];
$.each(images, function(i) {
  images[i] = new Image();
  images[i].src = this;
});
</script>
</body>
</html>

Pages: 1 2

Tags

,

Posts related to this article

Simple jQuery fullscreen image gallery jQuery custom content scroller Fullscreen background image with jQuery

285 Comments

Post a comment

Comments pages: 1 … 5 6 7

  1. Mike G
    Posted on March 29, 2021 at 19:38 Permalink

    Could this be modified to show video?

    Reply
  2. john
    Posted on July 8, 2019 at 00:19 Permalink

    Is there any way to add code to make this an automated slideshow? Thank you

    Reply
  3. Julien
    Posted on January 18, 2019 at 03:37 Permalink

    Very nice piece of code, thank you!

    I adapted it to remove the hover’ing (quite headache inducing) among other small improvements.

    You can click on “iCover 2” here as an example:

    https://www.lddb.com/list.php?format=ld&list=dts&max=250

    Reply
  4. Sambasiva Balaji
    Posted on December 25, 2018 at 13:35 Permalink

    good template for responsive mode of image gallery

    Reply
  5. Odevvebilim
    Posted on August 14, 2018 at 03:45 Permalink

    Very good thank…

    Reply
  6. Agustin
    Posted on August 9, 2018 at 17:32 Permalink

    Hi! this is an awesome template! thanks a lot.

    I’d like to fit this inside a div instead of using it fullscreen (because i want a banner to be on top of it all the time) ¿Is there a way to do so?

    Reply
  7. Ideas Launcher SAS
    Posted on July 25, 2018 at 02:40 Permalink

    Great and usefull for web development and grafic arts in web sites, very important tool. thx from colombia.

    Reply
  8. bitxel
    Posted on July 13, 2017 at 03:04 Permalink

    Beautiful work, downloading, thank you

    Reply
  9. Dobro
    Posted on March 31, 2017 at 19:33 Permalink

    Hello ,
    How do I view images in a folder ?

    I upload my image folder
    But how can I tell SideWays to view them?

    Thanks

    Reply
    • Flash Buddy
      Posted on March 12, 2019 at 18:27 Permalink

      You don’t specify an image folder, but rather edit the html pages to replace the existing path to your folder and images. ex:

      Reply
  10. Trevor
    Posted on August 25, 2016 at 07:19 Permalink

    I cant seem to have this exactly as you do, all the png’s wont load. Do I need to make them special?

    Reply
  11. Shojib
    Posted on November 23, 2015 at 22:41 Permalink

    Awesome tool …….

    Reply
  12. Giovanni
    Posted on August 15, 2015 at 15:51 Permalink

    It’s beautiful, but how can I insert a comment for each of images?

    Reply
  13. Mike
    Posted on August 12, 2015 at 11:17 Permalink

    Hey there, Your work is great..at last I found an image gallery that I can use in my project..thanks so much keep up! God bless!

    Reply

Comments pages: 1 … 5 6 7

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>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php