Fork me on GitHub

Digital Slideshow (jQuery Plugin)

Nowadays you can find on the Internet many slideshow plugins using jQuery or other libraries based on Javascript. Some are better some are worse but in some specific cases is better create own solution (development of own solution takes much more time but usually it's much more easier to extend plugin and during development process you can learn many new things). For landing page for our next mobile project Teach Me Apps I developed easy slideshow plugin using jQuery library which I gave code name Digital Slideshow.

I decided to share with you full code of this plugin. You can plugin to extend and also use this plugin or code snippet in your opensource and commercial projects without any restrictions. If you like this plugin please share this page with other or support us with your like or tweet on our BLOG or Official Website.

Download last version of Digital Slideshow

Digital Slideshow v1.0.0 Download

Example of Digital Slideshow:

teach me volleyball island test test

How to use: Step by step instructions


1. Download and unzip the latest version of Digital Slideshow from GitHub. You can choose from uncompressed and minified version.
2. Look inside the js folder where you will find jquery-x.x.x.min.js and slideshow-x.x.x.js. Copy this folder with this 2 files to root of your server (use same file hierarchy otherwise you will have to edit file paths) and put this code snippet to header of your main HTML page. jQuery library have to be loaded first before slideshow-x.x.x.js. <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/slideshow-1.0.0.js"></script>

3. Look inside folder css where you will find slideshow.css. Copy this folder to root of your server (use same file hierarchy otherwise you will have to edit file paths) and put this code snippet to header of your HTML page. <link rel="stylesheet" media="screen" href="css/slideshow.css" type="text/css" />
4. Look inside folder images/default/ where you find files arrow_left.png, arrow_right.png, nav_active.png, nav_unactive.png and ,transparent.png. These files are used in stylesheet file slideshow.css. By default slideshow.css will look for these images in folder called images/default/. Copy this folder to root of your server (use same file hierarchy otherwise you will have to edit file paths).
5. Put this HTML code snippet to body of main HTML page. Every image tag contains special attributes data-label and data-text where you can define label and description text if you want show description box for slide. <div id="slideshow">
  <div class="slides">
    <img src="slider/1.png" alt="image1" data-label="Slide Label 1" data-text="Slide Text 1" />
    <img src="slider/2.png" alt="image2" data-label="" data-text="" />
    <img src="slider/3.png" alt="image3" data-label="Slide Label 3" data-text="Slide Text 3" />
    <img src="slider/4.png" alt="image4" data-label="Slide Label 4" data-text="Slide Text 4" />
    <div class="description"></div>
    <div class="preloader"></div>
  </div>
  <div class="navigation"></div>
</div>

6. And last step we have to initialize slideshow plugin. So put this javascript code snippet to header of HTML page: <script type="text/javascript">

  $(document).ready(function()
  {

    slideshow({
        rootElement: 'slideshow', //identificator of slideshow HTML container
        w: 800, //width of of slideshow HTML container in px
        h: 300, //height of of slideshow HTML container in px
        autoplay: true //turn on autoplay mode
    });

  });

</script>

7. And here is the result :-)

image1 image2 image3 image4


Bugs

If you find a bug, create an issue on GitHub. Include your operating system and browser version along with detailed steps to reproduce the bug.

Feature requests

If you want a feature added, please create an issue on GitHub. Someone else or I might be able to help out. No guarantees.

Support questions

If you have a question that is not a bug or a feature request, your best chance of getting an answer is contact me on hello[at]beedigital.sk.

Version history

Discussion

comments powered by Disqus

© 2013 Tomáš Mahrík | BLOG | BEE DIGITAL