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.

Displaying images using Javascript

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: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('
  DH
TMLgoodies_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>=||(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 = 
  'al
pha(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<=&& 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