<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer23.jpg" width="1680" height="1050" alt="IMG" title="Image 1" id="bgimg" /></div>
<div id="preloader"><img src="https://i82.servimg.com/u/f82/19/38/53/40/ajax-l11.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="https://i82.servimg.com/u/f82/19/38/53/40/toolba10.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="https://i82.servimg.com/u/f82/19/38/53/40/univer23.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer11.jpg" title="Image 1" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer24.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer12.jpg" title="Image 2" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer25.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer13.jpg" title="Image 3" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer26.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer14.jpg" title="Image 4" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer27.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer15.jpg" title="Image 5" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer28.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer16.jpg" title="Image 6" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer29.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer17.jpg" title="Image 7" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer30.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer18.jpg" title="Image 8" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer31.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer19.jpg" title="Image 9" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer32.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer20.jpg" title="Image 10" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer33.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer21.jpg" title="Image 11" alt="IMG" class="thumb" /></a>
</div></div>

<div class="content">
<div><a href="https://i82.servimg.com/u/f82/19/38/53/40/univer34.jpg"><img src="https://i82.servimg.com/u/f82/19/38/53/40/univer22.jpg" title="Image 12" alt="IMG" class="thumb" /></a>
</div></div>

</div></div></div></div>
@import url(https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap);
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(https://i82.servimg.com/u/f82/19/38/53/40/fs_img10.png);
}
#toolbar img {
border: none;
}
#img_title {
position: fixed;
z-index: 3;
left: 10px;
top: 10px;
padding: 10px;
background: url(https://i82.servimg.com/u/f82/19/38/53/40/fs_img10.png);
color: #fff;
font-family: 'Oswald', sans-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(https://i82.servimg.com/u/f82/19/38/53/40/empty13.gif);
}
#outer_container {
position: relative;
padding: 0;
width: 100%;
margin: 40px auto;
}
#outer_container .thumbScroller {
position: relative;
overflow: hidden;
background: url(https://i82.servimg.com/u/f82/19/38/53/40/fs_img10.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(https://i82.servimg.com/u/f82/19/38/53/40/nextim10.png) center center no-repeat;
}
.prevImageBtn {
background: #000 url(https://i82.servimg.com/u/f82/19/38/53/40/previm10.png) center center no-repeat;
}
$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")
$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);
if($defaultViewMode=="full") {
$toolbar_a.html("<img src='https://i82.servimg.com/u/f82/19/38/53/40/toolba11.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
} else {
$toolbar_a.html("<img src='https://i82.servimg.com/u/f82/19/38/53/40/toolba10.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
}
ShowHideNextPrev($nextPrevBtnsInitState);
$thumbScroller_container.css("marginLeft",$tsMargin+"px");
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);
} else if(mouseCoords<destX){
$thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType);
} else {
$thumbScroller_container.stop();
}
}
});
$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
$thumbnails_wrapper.hover(
function() {
var $this=$(this);
$this.stop().fadeTo("slow", 1);
},
function() {
var $this=$(this);
$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
}
);
$thumbScroller_thumb.hover(
function() {
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 1);
},
function() {
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
}
);
$(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);
});
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);
FullScreenBackground($this,imageWidth,imageHeight);
$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();
});
}
});
}
if($toolbar.css("display")!="none") {
$toolbar.fadeTo("fast", 0.4);
}
$toolbar.hover(
function() {
var $this=$(this);
$this.stop().fadeTo("fast", 1);
},
function() {
var $this=$(this);
$this.stop().fadeTo("fast", 0.4);
}
);
$("#outer_container a").click(function(event) {
event.preventDefault();
var $this=$(this);
GetNextPrevImages($this);
GetImageTitle($this);
SwitchImage(this);
ShowHideNextPrev("show");
});
$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);
});
if($keyboardNavigation=="on") {
$(document).keydown(function(ev) {
if(ev.keyCode == 39) {
SwitchImage($outer_container.data("nextImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
return false;
} else if(ev.keyCode == 37) {
SwitchImage($outer_container.data("prevImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
return false;
}
});
}
function ShowHideNextPrev(state) {
if(state=="hide") {
$nextImageBtn.fadeOut();
$prevImageBtn.fadeOut();
} else {
$nextImageBtn.fadeIn();
$prevImageBtn.fadeIn();
}
}
function GetImageTitle(elem) {
var title_attr=elem.children("img").attr("title");
$img_title.data("imageTitle", title_attr);
}
function GetNextPrevImages(curr) {
var nextImage=curr.parents(".content").next().find("a").attr("href");
if(nextImage==null) {
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) {
var prevImage=$(".content").last().find("a").attr("href");
}
$outer_container.data("prevImage",prevImage);
}
function SwitchImage(img) {
$preloader.fadeIn("fast");
var theNewImg = new Image();
theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
theNewImg.src = img;
}
function CreateDelegate(contextObject, delegateMethod) {
return function() {
return delegateMethod.apply(contextObject, arguments);
}
}
function theNewImg_onload() {
$bgimg.data("newImageW",this.width).data("newImageH",this.height);
BackgroundLoad($bgimg,this.width,this.height,this.src);
}
function FullScreenBackground(theItem,imageWidth,imageHeight) {
var winWidth=$(window).width();
var winHeight=$(window).height();
if($toolbar.data("imageViewMode")!="original") {
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if($toolbar.data("imageViewMode")=="full") {
if ((winHeight / winWidth) < picHeight) {
$(theItem).attr("width",winWidth);
$(theItem).attr("height",picHeight*winWidth);
} else {
$(theItem).attr("height",winHeight);
$(theItem).attr("width",picWidth*winHeight);
};
} else {
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 {
$(theItem).attr("width",imageWidth);
$(theItem).attr("height",imageHeight);
$(theItem).css("margin-left",(winWidth-imageWidth)/2);
$(theItem).css("margin-top",(winHeight-imageHeight)/2);
}
}
function ImageViewMode(theMode) {
$toolbar.data("imageViewMode", theMode);
FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
if(theMode=="full") {
$toolbar_a.html("<img src='https://i82.servimg.com/u/f82/19/38/53/40/toolba11.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
} else {
$toolbar_a.html("<img src='https://i82.servimg.com/u/f82/19/38/53/40/toolba10.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
}
}
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];
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.