Simple Content Browser using HTML/CSS3/jQuery

Osman Kalache

4.67/5 (3 votes)

2 Feb 2013CPOL1 min read

15.9K

195

Building an easy to reuse widget with jQuery

Introduction

This is a small widget/plug-in written using HTML/CSS3 and jQuery, which results in displaying data (images or any HTML element) in a slideshow/carousel with a small amount of animation. The real purpose of this piece of code is to introduce a manner of building plug-ins/widgets (i.e., code that is usually going to be used by other people) in which the user does not have to spend as much time understanding the existing code as starting a new one from scratch.

Background

During a project I was working on, I needed to display some HTML elements in the form of a slideshow, so I thought I could get something ready to use on the internet, and then after checking several ones, I figured that the time I would spend "understanding" how to use them would be better spent on starting a new one from scratch and making sure it would be easy to integrate in future projects.

Using the Code

This is the result of what the integration code would look like:

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        
        <link href="stylesheets/content-browser.css" 
        rel="stylesheet" type="text/css">
        <!-- Styles for our widget --> 
    </head>
    <body>
      <div id="content-browser"> 
      <!-- this div with the id="content-browser" is where it all happens -->
        <img src="img1.jpg"><!-- element1 -->
        <img src="img2.jpg"><!-- element2 -->
        <img src="img3.jpg"><!-- element3 -->
        <!-- etc... -->
      </div>
      
    <script src="js/jquery-1.8.3.min.js"></script> 
    <!-- jQuery invoked -->
    <script src="js/content-browser.js"></script>
    <!-- Our Plugin gets invoked next -->
    
    </body>
</html>

As you can see from the example above, using this widget consists of three easy steps:

Integrating the CSS file for the Styles.
Creating a Div with the ID of "content-browser" and nesting to it as many elements as we want to display in our browser (img tags in this example).
Invoking both the JavaScript files for jQuery and our content-browser.

The jQuery Code

Here is the code for switching between slides and their animation, nothing fancy:

JavaScript

// Simple Content browser
$(function(){ //  This function is called when the document is finished loading
    
    // this is the selector of the elements which would be considered as slides
    var slide_selector = 'img'; // must be set properly otherwise there should be a mess
    // Wrap the original Div entered by the user 
    //so we can add some other elements to it(Styles and Navigation buttons).
    $('#content-browser').wrap('<div id="browser-wrapper"></div>');  
    // Append a new div which will contain all the navigation buttons
    $('#browser-wrapper').append('<div id="cat_navigation">
    <div id="centrer"></div></div>');
    // Add new div elements which will act as buttons for switching in between slides
    for(i=0;i<$('#content-browser').children().length;i++){
        if(i==0){ // the first element will be classed as "selected" for display purposes
        $('#cat_navigation #centrer').append('<div class="
        selected" index="'+i+'"></div>');
        } else {
        $('#cat_navigation #centrer').append('<div index="'+i+'"></div>');    
        }
    }
    // Hide all the contents of the div#content-browser
    $('#content-browser').children().css('display','none').animate({opacity:'0'});;
    // display the first child
    $('#content-browser '+slide_selector).eq(0).css('display','inherit').animate({opacity:'1'});
    
    // handling the event of clicking a navigation button
    $('#cat_navigation #centrer div').click(function(e) {
        // Deselect all buttons
        $('#cat_navigation #centrer div.selected').removeClass("selected");
        // Select the current button being clicked
        e.currentTarget.className = 'selected';
        // Fade out and hide the current slide
        $('#content-browser').children().animate({opacity:'0'}).css('display','none');
        // Show and fade in the new slide
        $('#content-browser '+slide_selector).eq(e.currentTarget.getAttribute('index')).css(
           'display','inherit').animate({opacity:'1'});
    });
    
});

Points of Interest

As developers, we should always think of how the code we write would be reused later.

History

First release: Jan 2013

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)