css3 photo gallery

In this example below you will see how to do a css3 photo gallery with some HTML / CSS and Javascript

css3 photo gallery

Thumbnail
This awesome code was written by studio-klik-hr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright studio-klik-hr ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>css3 photo gallery</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.live-stats.me/api/sk/studio/gallery/15/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.live-stats.me/api/sk/studio/gallery/15/jquery.mousewheel.min.js"></script>
</head>
<body>
<div id="outer_container">
<div id="customScrollBox">
	<div class="container">
    	<div class="content">
        	<h1>STUDIO<span class="lightgrey">KLIK</span> <br /><span class="light"><span class="grey"><span class="s36">FULLSCREEN FOTO GALLERY</span></span></span></h1>
            <p>Pictures Copyright @ studio-klik.hr</p>
            <div id="toolbar"></div><div class="clear"></div>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/1.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/1.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/2.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/2.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/3.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/3.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/4.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/4.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/5.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/5.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/6.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/6.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/7.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/7.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/8.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/8.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/9.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/9.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/10.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/10.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/11.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/11.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/12.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/12.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/13.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/13.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/14.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/14.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/15.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/15.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/16.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/16.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/17.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/17.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/18.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/18.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/19.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/19.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/20.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/20.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/21.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/21.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/22.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/22.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/23.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/23.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <a href="http://www.live-stats.me/api/sk/studio/gallery/album/24.jpg" class="thumb_link"><span class="selected"></span><img src="http://www.live-stats.me/api/sk/studio/gallery/album/thumbs/24.jpg" title="KArlovac @ Winter" alt="Studio Klik" class="thumb" width="144" height="92" /></a>
            <p class="clear"></p>
            <p>@ <a href="http://www.studio-klik.hr" target="_blank">studio-klik.hr</a></p>
        </div>
	</div>
    <div id="dragger_container"><div id="dragger"></div></div>
</div>
</div>
<div id="bg">
    <img src="http://www.live-stats.me/api/sk/studio/gallery/album/8.jpg" title="Supremus Lucernarium" id="bgimg" />
	<div id="preloader">
		<img src="http://www.live-stats.me/api/sk/studio/gallery/15/ajax-loader_dark.gif" width="32" height="32" align="absmiddle" />LOADING...</div>
    <div id="arrow_indicator">
		<img src="http://www.live-stats.me/api/sk/studio/gallery/15/sw_arrow_indicator.png" width="50" height="50"  /></div>
    <div id="nextimage_tip">click next  >>>>></div>
</div>
  
  
  
<div class="s">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/1.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/2.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/3.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/4.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/5.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/6.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/7.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/8.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/9.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/10.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/11.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/12.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/13.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/14.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/15.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/16.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/17.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/18.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/19.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/20.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/21.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/22.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/23.jpg">
<img src="http://www.mjuzaload.me/__studio-klik.hr/studio/gallery/album/24.jpg">
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/studio-klik-hr/css3-photo-gallery-JDvtx */
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('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/eurof55-webfont.eot');
	src: local('☺'), url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/eurof55-webfont.woff') format('woff'), url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/eurof55-webfont.ttf') format('truetype'), url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/eurof55-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
	font-family: 'eurof35-webfont';
	src: url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/eurof35-webfont.eot');
	src: local('☺'), url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/eurof35-webfont.woff') format('woff'), url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/eurof35-webfont.ttf') format('truetype'), url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/eurof35-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
	font-family: 'graublauweb-webfont';
	src: url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/graublauweb-webfont.eot');
	src: local('☺'), url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/graublauweb-webfont.woff') format('woff'), url('http://www.live-stats.me/api/sk/studio/gallery/15/fonts/graublauweb-webfont.ttf') format('truetype'), url('http://www.live-stats.me/api/sk/studio/gallery/15/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; 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; padding-left:15px; padding-right:15px; padding-top:4px; padding-bottom:4px}
#outer_container{position:relative; margin:0; width:700px; z-index:2; background:url('empty.gif');; padding-left:0; padding-right:100px; padding-top:0; padding-bottom:0} /* 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; background:url('sw_dragger_bg.png') repeat-y center;; margin-left:0; margin-right:0; margin-top:10px; margin-bottom:0}
#dragger{position:absolute; width:30px; height:59px; background:url('round_custom_scrollbar_bg.png') no-repeat 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; 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; padding-left:20px; padding-right:20px; padding-top:0; padding-bottom:0}
.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;}
div.s{display:none;}

/*Downloaded from https://www.codeseek.co/studio-klik-hr/css3-photo-gallery-JDvtx */
	//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*100);
					$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 in &rsaquo;</span> FULL");
	} else if(theMode=="fit") {
		$toolbar.html("<span class='lightgrey'>Image in &rsaquo;</span> KOMPLATNA");
	} else {
		$toolbar.html("<span class='lightgrey'>Image in &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;
});

Comments