Click here to Skip to main content
13,513,296 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


5 bookmarked
Posted 29 Jan 2013

Simple Content Browser using HTML/CSS3/jQuery

, 2 Feb 2013
Rate this:
Please Sign up or sign in to vote.
Building an easy to reuse widget with jQuery


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.


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:

<!doctype html>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <link href="stylesheets/content-browser.css" 

        rel="stylesheet" type="text/css">
        <!-- Styles for our widget --> 
      <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... -->
    <script src="js/jquery-1.8.3.min.js"></script> 
    <!-- jQuery invoked -->
    <script src="js/content-browser.js"></script>
    <!-- Our Plugin gets invoked next -->

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:

// 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
        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
    // 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
        // Show and fade in the new slide
        $('#content-browser '+slide_selector).eq(e.currentTarget.getAttribute('index')).css(

Points of Interest

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


  • First release: Jan 2013


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


About the Author

Osman Kalache
Software Developer Smart Solutions Médéa
Algeria Algeria
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
wymermon30-Jan-13 10:37
memberwymermon30-Jan-13 10:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180417.1 | Last Updated 2 Feb 2013
Article Copyright 2013 by Osman Kalache
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid