Blog | Icon Web Solutions - www.IconWebSolutions.info: Create a Web Slideshow using JQuery

The final result of this blog post is a web accessible slideshow created using HTML, CSS and JavaScript (the JQuery library) as in this page

Step 1: The HTML Content

In Step 1, we add the HTML markup for the slides' contents within the <body> of the webpage. There is no limit on the number of slides.

<div id="slideshow">
<div id="slidesContainer">
    <div class="slide">
    <h2>  </h2>
        <p>  </p>
    </div>
    <div class="slide">
    <h2>  </h2>
        <p>  </p>
    </div>
    <div class="slide">
    <h2>  </h2>
        <p>  </p>
    </div>
    <div class="slide">
    <h2>  </h2>
        <p>  </p>
    </div>
</div>
</div>
<!-- Slideshow HTML ->

Step 2: The CSS Content

The next step, is to add the CSS content within the <head> element of the webpage that consists of the slideshow style rules. These rules can be modified according to the need; for example, the height and width rules of the slides, etc. Two images named 'control_left.jpg' and 'control_right.jpg' with height equal to the height of #slideshow are required.

#slideshow {
    margin: 0 auto;
    width: 580px;
    height: 320px;
    position: relative;
}

#slideshow #slidesContainer {
margin: 0 auto;
width: 500px;
height: 320px;
overflow: hidden; /* allow scrollbar */
position: relative;
}

#slideshow #slidesContainer .slide {
margin: 0 auto;
width: 480px; /* reduce by 20 pixels */
height: 320px;
}

.control {
display: block;
width: 39px;
height: 320px;
text-indent: -10000px;
position: absolute;
cursor: pointer;
}

#leftControl {
top: 0;
left: 0;
background: transparent url(images/control_left.jpg) no-repeat 0 0;
}

#rightControl {
top: 0;
right: 0;
background: transparent url(images/control_right.jpg) no-repeat 0 0;
}

.slide p {
margin-left: 55px;
text-align: center;
}

.slide h2 {
font: italic 20px Georgia, "Times New Roman", Times, serif;
color: #ABAAAA;
text-align: center;
letter-spacing: -1px;
}

-->
</style>

Step 3: The JavaScript content

In this step, we insert the JavaScript code to manipulate the DOM for the slideshow effect. Our code is dependent on the JQuery JavaScript library, therefore the library will be linked as well.

$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshw')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});

</script>

The web-based slideshow is now ready. Clicking on the right/left arrow images have the effect of moving the slides right/left one at a time.

Tuesday, May 19, 2009

Create a Web Slideshow using JQuery

0 Comments:

Post a Comment

Previous Posts