Displaying images using
Javascript
This Example describes the way to display images using javascript and css.For this we are going to make program named
image-slideshow-5.
css,image-slideshow-5.html,image-slideshow-5.js.The code involved in programs are described below:-
mage-slideshow-5.html
<html>
<head>
<h1>Ajax Images with next/previous options</h1>
<title>Image slideshow 5</title>
<link rel="stylesheet" href="image-slideshow-5.css" type="text/css">
<script type="text/javascript" src="image-slideshow-5.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="DHTMLgoodies_panel_one">
<div id="DHTMLgoodies_thumbs">
<div id="DHTMLgoodies_thumbs_inner">
<div class="strip_of_thumbnails">
<div>
<a id="firstThumbnailLink" href="#"
onclick="showPreview('images/image1_big.jpg',this);return false;">
<img src="images/image1.jpg"></a></div>
<div><a href="#" onclick=
"showPreview('images/image2_big.jpg',this);return false;">
<img src="images/image2.jpg"></a></div>
<div><a href="#"
onclick="showPreview('images/image3_big.jpg',this);return false;">
<img src="images/image3.jpg"></a></div>
</div>
<div class="strip_of_thumbnails">
<div><a href="#"
onclick="showPreview('images/image4_big.jpg',this);return false;">
<img src="images/image4.jpg"></a></div>
<div><a href="#"
onclick="showPreview('images/image5_big.jpg',this);return false;">
<img src="images/image5.jpg"></a></div>
<div><a href="#"
onclick="showPreview('images/image6_big.jpg',this);return false;">
<img src="images/image6.jpg"></a></div>
</div>
<div class="strip_of_thumbnails">
<div><a href="#"
onclick="showPreview('images/image7_big.jpg',this);return false;">
<img src="images/image7.jpg"></a></div>
<div><a href="#"
onclick="showPreview('images/image8_big.jpg',this);return false;">
<img src="images/image8.jpg"></a></div>
<div><a href="#"
onclick="showPreview('images/image9_big.jpg',this);return false;">
<img src="images/image9.jpg"></a></div>
</div>
<div class="strip_of_thumbnails">
<div><a href="#"
onclick="showPreview('images/image10_big.jpg',this);return false;">
<img src="images/image10.jpg"></a></div>
<div><a href="#"
onclick="showPreview('images/image11_big.jpg',this);return false;">
<img src="images/image11.jpg"></a></div>
<div><a href="#"
onclick="showPreview('images/image12_big.jpg',this);return false;">
<img src="images/image12.jpg"></a></div>
</div>
</div>
</div>
<div id="DHTMLgoodies_arrows">
<img id="DHTMLgoodies_leftArrow" class="leftArrow" src="images/arrow_left.gif">
<img id="DHTMLgoodies_rightArrow" class="rightArrow" src="images/arrow_right.gif">
</div>
</div>
<div id="DHTMLgoodies_largeImage">
<table>
<tr>
<td>
<img src="images/image1_big.jpg"></a>
</td>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
initGalleryScript();
</script>
</body>
</html>
|
image-slideshow-5.css
#mainContainer{
margin:0 auto;
width:730px;
text-align:left;
background-color:#FFFFCC;
padding:3px;
border:3px solid #317082;
}
.clear{
clear:both;
}
#DHTMLgoodies_panel_one,#DHTMLgoodies_arrows,#DHTMLgoodies_thumbs{
width:240px;
}
#DHTMLgoodies_panel_one{
float:left;
}
#DHTMLgoodies_thumbs{
overflow:hidden;
height:280px;
position:relative;
float:left;
}
#DHTMLgoodies_largeImage{
width:400px;
height:310px;
float:left;
padding-left:10px;
padding-right:10px;
}
#DHTMLgoodies_largeImage table{
width:100%;
height:100%;
text-align:center;
}
#DHTMLgoodies_largeImage img{
border:5px solid #317082;
}
.strip_of_thumbnails{
width:114px;
padding:5px;
position:absolute;
}
.strip_of_thumbnails div{
width:110px;
height:90px;
padding:2px;
text-align:center;
}
.strip_of_thumbnails img{
border:0px;
padding:5px;
}
.strip_of_thumbnails .activeImage{
border:5px solid #317082;
padding:0px;
}
.leftArrow{
float:left;
}
.rightArrow{
float:right;
}
#DHTMLgoodies_thumbs_inner{
position:relative;
width:1000px;
}
|
image-slideshow-5.js
var opacitySpeed = 2;
var opacitySteps = 10;
var slideSpeed = 5;
var slideSteps = 8;
var columnsOfThumbnails = 4;
var DHTMLgoodies_largeImage = false;
var DHTMLgoodies_imageToShow = false;
var DHTMLgoodies_currentOpacity = 100;
var DHTMLgoodies_slideWidth = false;
var DHTMLgoodies_thumbTotalWidth = false;
var DHTMLgoodies_viewableWidth = false;
var currentUnqiueOpacityId = false;
var DHTMLgoodies_currentActiveImage = false;
var DHTMLgoodies_thumbDiv = false;
var DHTMLgoodies_thumbSlideInProgress = false;
var browserIsOpera = navigator.userAgent.indexOf('Opera')>=0?true:false;
var leftArrowObj;
var rightArrowObj;
var thumbsColIndex = 1;
var thumbsLeftPos = false;
function initGalleryScript()
{
leftArrowObj = document.getElementById('DHTMLgoodies_leftArrow');
leftArrowObj.style.visibility='hidden';
rightArrowObj = document.getElementById('DHTMLgoodies_rightArrow');
leftArrowObj.style.cursor = 'pointer';
rightArrowObj.style.cursor = 'pointer';
leftArrowObj.onclick = moveThumbnails;
rightArrowObj.onclick = moveThumbnails;
DHTMLgoodies_largeImage =
document.getElementById('DHTMLgoodies_largeImage').getElementsByTagName('IMG')[0];
var innerDiv = document.getElementById('DHTMLgoodies_thumbs_inner');
DHTMLgoodies_slideWidth = innerDiv.getElementsByTagName('DIV')[0].offsetWidth;
DHTMLgoodies_thumbDiv = document.getElementById('DHTMLgoodies_thumbs_inner');
DHTMLgoodies_thumbDiv.style.left = '0px';
var subDivs = DHTMLgoodies_thumbDiv.getElementsByTagName('DIV');
DHTMLgoodies_thumbTotalWidth = 0;
var tmpLeft = 0;
for(var no=0;no<subDivs.length;no++){
if(subDivs[no].className=='strip_of_thumbnails'){
DHTMLgoodies_thumbTotalWidth = DHTMLgoodies_thumbTotalWidth + DHTMLgoodies_slideWidth;
subDivs[no].style.left = tmpLeft + 'px';
subDivs[no].style.top = '0px';
tmpLeft = tmpLeft + subDivs[no].offsetWidth;
}
}
DHTMLgoodies_viewableWidth =
document.getElementById('DHTMLgoodies_thumbs').offsetWidth;
DHTMLgoodies_currentActiveImage =
DHTMLgoodies_thumbDiv.getElementsByTagName('A')[0].getElementsByTagName('IMG')[0];
DHTMLgoodies_currentActiveImage.className='activeImage';
}
function moveThumbnails()
{
if(DHTMLgoodies_thumbSlideInProgress)return;
DHTMLgoodies_thumbSlideInProgress = true;
if(this.id=='DHTMLgoodies_leftArrow'){
thumbsColIndex--;
rightArrowObj.style.visibility='visible';
if(DHTMLgoodies_thumbDiv.style.left.replace('px','')/1>=0){
leftArrowObj.style.visibility='hidden';
DHTMLgoodies_thumbSlideInProgress = false;
return;
}
slideThumbs(slideSteps,0);
}else{
thumbsColIndex++;
leftArrowObj.style.visibility='visible';
var left = DHTMLgoodies_thumbDiv.style.left.replace('px','')/1;
var showArrow = true;
if(DHTMLgoodies_thumbTotalWidth + left - DHTMLgoodies_slideWidth
<= DHTMLgoodies_viewableWidth)showArrow = false;
if(columnsOfThumbnails)showArrow = true;
if(!showArrow)
{
rightArrowObj.style.visibility='hidden';
DHTMLgoodies_thumbSlideInProgress = false;
return;
}
slideThumbs((slideSteps*-1),0);
}
}
function slideThumbs(speed,currentPos)
{
var leftPos;
if(thumbsLeftPos){
leftPos= thumbsLeftPos;
}else{
var leftPos = DHTMLgoodies_thumbDiv.style.left.replace('px','')/1;
thumbsLeftPos = leftPos;
}
currentPos = currentPos + Math.abs(speed);
var tmpLeftPos = leftPos;
leftPos = leftPos + speed;
thumbsLeftPos = leftPos;
DHTMLgoodies_thumbDiv.style.left = leftPos + 'px';
if(currentPos<DHTMLgoodies_slideWidth)
setTimeout('slideThumbs(' + speed + ',' + currentPos + ')',slideSpeed);else{
if(tmpLeftPos>=0 || (columnsOfThumbnails && thumbsColIndex==1)){
document.getElementById('DHTMLgoodies_leftArrow').style.visibility='hidden';
}
var left = tmpLeftPos;
var showArrow = true;
if(DHTMLgoodies_thumbTotalWidth + left - DHTMLgoodies_slideWidth
<= DHTMLgoodies_viewableWidth)
showArrow=false;
if(columnsOfThumbnails){
if((thumbsColIndex+1)<columnsOfThumbnails)showArrow=true;
else showArrow = false;
}
if(!showArrow){
document.getElementById
('DHTMLgoodies_rightArrow').style.visibility='hidden';
}
DHTMLgoodies_thumbSlideInProgress = false;
}
}
function showPreview(imagePath,inputObj)
{
if(DHTMLgoodies_currentActiveImage){
if(DHTMLgoodies_currentActiveImage==inputObj.getElementsByTagName('IMG')[0])return;
DHTMLgoodies_currentActiveImage.className='';
}
DHTMLgoodies_currentActiveImage = inputObj.getElementsByTagName('IMG')[0];
DHTMLgoodies_currentActiveImage.className='activeImage';
DHTMLgoodies_imageToShow = imagePath;
var tmpImage = new Image();
tmpImage.src = imagePath;
currentUnqiueOpacityId = Math.random();
moveOpacity(opacitySteps*-1,currentUnqiueOpacityId);
}
function setOpacity(){
if(document.all) {
DHTMLgoodies_largeImage.style.filter =
'alpha(opacity=' + DHTMLgoodies_currentOpacity + ')';
}else{
DHTMLgoodies_largeImage.style.opacity = DHTMLgoodies_currentOpacity/100;
}
}
function moveOpacity(speed,uniqueId)
{
if(browserIsOpera){
DHTMLgoodies_largeImage.src = DHTMLgoodies_imageToShow;
return;
}
DHTMLgoodies_currentOpacity = DHTMLgoodies_currentOpacity + speed;
if(DHTMLgoodies_currentOpacity<=5 && speed<0){
var tmpParent = DHTMLgoodies_largeImage.parentNode;
DHTMLgoodies_largeImage.parentNode.removeChild(DHTMLgoodies_largeImage);
DHTMLgoodies_largeImage = document.createElement('IMG');
tmpParent.appendChild(DHTMLgoodies_largeImage);
setOpacity();
DHTMLgoodies_largeImage.src = DHTMLgoodies_imageToShow;
speed=opacitySteps;
}
if(DHTMLgoodies_currentOpacity>=99 && speed>0)DHTMLgoodies_currentOpacity=99;
setOpacity();
if(DHTMLgoodies_currentOpacity>=99 && speed>0)return;
if(uniqueId==currentUnqiueOpacityId)setTimeout
('moveOpacity(' + speed + ',' + uniqueId + ')',opacitySpeed);
}
|
Output of the program:-
Download Source Code
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
