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

Displaying images using Javascript

Displaying images using Javascript

Displaying images using Javascript

Tutorials