Home Html Displaying images using Javascript
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Displaying images using Javascript

Advertisement
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

     

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

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 29, 2008

Ask Questions?    Discuss: Displaying images using Javascript   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Ahmed
May 28, 2012
wh y does this code not work?

<HTML> <HEAD> <TITLE> PLUG-IN DETECTION </TITLE> </HEAD> <BODY BGCOLOR = WHITE> <H2 ALIGN = CENTER> ABD ALLAH PICTURE 2011 <SCRIPT LANGUAGE = JAVASCRIPT TYPE = "TEXT/JAVASCRIPT"> <!-- Hide Script from old browsers document.write('<embed src = "'images/Abd_Allah_Picture.jpeg'" "width = 320" "hight = 250" loop = false autoplay = true>') document.write('<img src = "'images/Abd_Allah_Picture_2.jpeg'" "with = 320" "height = 208" alt ="comet">'> </SCRIPT> </BODY> </HTML>
DMCA.com