Hello folks,

Today I’d like to talk about how I used jQuery , HTML and  CSS  to build a simple slide show. Obviously this is only a wire frame so, it’s up to you making it beautiful!!

So, open your favourite editor and let’s start.

The problem:

1. At job I had to display a bunch of medical images in a slide show, all of them with the same width but different heights.
2. Somewhere in the company web app a width was set on the wrapper div so that I had to slide the pictures vertically.

Solution:

First of all I came out with this HTML design:

<a onclick="startDicomSlideshow();" href="#">Open</a>
<div class="dicom_wrapper" id="wrapper">
  <div class="dicom_modal" id="dumb_wrapper"></div>
  <div class="vertical-offset" id="modal_slide">
  <div class="dicom_slide" id="dicom_slide">&lt;ul id="dicom_images"&gt;
  <ul>
     <li id="img1"><img alt="" src="../assets/images/image-1.png" />
         <a class="show_next" id="next" onclick="showNext(this);" href="#">Next</a>
         <a class="show_previous" id="previous" onclick="showPrevious(this);" href="#">Previous</a>
     </li>
     <li id="img2"><img alt="" src="../assets/images/image-2.png" />
         <a class="show_next" id="next" onclick="showNext(this);" href="#">Next</a>
         <a class="show_previous" id="previous" onclick="showPrevious(this);" href="#">Previous</a>
     </li>
     <li id="img3"><img alt="" src="../assets/images/image-3.png" />
        <a class="show_next" id="next" onclick="showNext(this);" href="#">Next</a>
        <a class="show_previous" id="previous" onclick="showPrevious(this);" href="#">Previous</a>
    </li>
    <li id="img4"><img alt="" src="../assets/images/image-4.png" />
        <a class="show_next" id="next" onclick="showNext(this);" href="#">Next</a>
        <a class="show_previous" id="previous" onclick="showPrevious(this);" href="#">Previous</a>
   </li>
  </ul>
 </div>
</div>
</div>

There is a main wrapper div, a dumb one which is needed to create an overlay, and the actual picture container. Images are organized in an unordered list and every list element contains also the previous/next links.; in this way the slide show is circular, i.e. that when end is reached, if a user clicks next, first picture is shown again.

CSS is also simple and here it is:

.dicom_wrapper{
        display: none;
        z-index:40001;
}

.dicom_modal {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        zoom: 1;
        background-color:black; 
        opacity:.5; /* Sets opacity so it's partly transparent */ 
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
        /* IE transparency */ filter:alpha(opacity=50); /* More IE transparency */ 
        z-index:40001;
}

.vertical-offset {
         position:absolute; 
         margin-left: -826px;
         top:-5%;
         left:70%; 
         z-index:40002; /* ensures box appears above overlay */ 
} 

.dicom_slide {
        position: relative;
        margin: 0 auto;
        background-color: #FFFFFF;
        border:1px solid black;
        overflow: hidden;
        width:100%;
}

.dicom_slide ul {
        list-style:none !important;
        width: 100%;

}

.dicom_slide li{
        position:relative; 
        margin-bottom: 20px;
        margin-right: 10px;
        margin-top: 20px;
}

.show_next {
        position: absolute;
        text-decoration: none;
        left:70%;
        color: #000000;
}

.show_previous{
        position: absolute;
        text-decoration: none;
        left: 5%;
      	color: #000000;
}

Up to now everything is really simple, so let’s now take a look at the first JavaScript function, the one I wrote to open the slide show:

function startDicomSlideshow(){
	var totalHeight = 0;
        $('#wrapper').show();
        var ele = $('#dicom_images').children('li');
        for(var i=0;i<ele.size();i++){
        var img = $(ele[i]).children('img');
	if(i ==0){
		totalHeight += $(img).height();
		$('#dicom_images').height($(img).height());
		$('#dicom_images').animate({
		                "margin-top":i*$(img).height()
		},1000);
	}else{
	   $(ele[i]).animate({
                            "height": "toggle"
                      },1000);   		
	}
       }
      }

The explanation is really simple:

1. Show the wrapper (it was hidden)
2. Get all list element
3. Loop through all of them and set margin-top of  the images div to 0 and its height to the first images one
4. Hide all the other images

The next/previous functions are also simple:

1. function showNext(current){

function showNext(current){
        var allImages = $('#dicom_images').children('li');
	var curId = $(current).parent('li').attr('id');
        for(var i=0;i<allImages.size();i++){
        var imgId = $(allImages[i]).attr('id');
        if(curId == imgId){
		  if(i+1<allImages.size()){
                         $('#'+curId).animate({
                                "height":"toggle"
                         },1000);
                    var imgHeight = $(allImages[i+1]).children('img').height();
	           $('#dicom_images').height(imgHeight); 
                   $(allImages[i+1]).animate({
                            "height": "toggle"
                      },1000); 
                   }else{
                       $('#'+curId).animate({
                                "height":"toggle"
                         },1000);
                       var imgHeight = $(allImages[0]).children('img').height();
	               $('#dicom_images').height(imgHeight); 
		      $(allImages[0]).animate({
                            "height": "toggle"
                      },1000);      
	         }
            }
      }
}

function showPrevious(current){
 	var curId = $(current).parent('li').attr('id');
        var allImages = $('#dicom_images').children('li');
        for(var i=0;i<allImages.size();i++){
       	var imgId = $(allImages[i]).attr('id');
        if(curId == imgId){
		    if(i-1>=0){
                         $('#'+curId).animate({
                                "height":"toggle"
                         },1000);
                     var imgHeight = $(allImages[i-1]).children('img').height();
                    $('#dicom_images').height(imgHeight);
	            $(allImages[i-1]).animate({
                            "height": "toggle"
                      },1000); 
                   }else{
                       $('#'+curId).animate({
                                "height":"toggle"
                         },1000);
                       var imgHeight = $(allImages[allImages.size()-1]).children('img').height();
                      $('#dicom_images').height(imgHeight);
		      $(allImages[allImages.size()-1]).animate({
                            "height": "toggle"
                      },1000);      
	         }
          }
      }
}

Here is the explanation for the showNext() function:

1. Get the current clicked next/previous link parent ID (the id of the <li> element)
2. Loop through all list elements and compare IDs
3. When you find the current one, check if the next one is in the list
4. If this check is positive, hide the current object , display the next one and set the div’s height to its one
5. If the check is not positive the array end has been reached and the first picture must be shown.

The showPrevious() function is similar except for the checks, which are applied the i-1 object.

Simple isn’t it?

Enjoy!