Image Rotator with jQuery & JSON

In this post i am going to create a image rotator with jQuery and JSON for this i am using a logic less template libraries Mustache.js which get the data from the external JSON file and a jQuery plugin cycle.js which rotate the data

Image Rotator with jQuery and JSON

Download Script

View Demo

html

html is very simple in html we have a main div a rotaor div in this div all the data from the json file will be feeded. we have 2 a tag which acts like next and previous button

<div id="main">
 <a href="#" id="prev_btn" class="btn">&laquo;</a>
        <a href="#" id="next_btn" class="btn">&raquo;</a>
 <div id="rotaor">
 </div>
</div>

JavaScript

javascript has very less code in simple word we are getting the data from the json file via jQuery and formatting the data with mustache.js and creating the rotator with cycle.js plugin

<!--formating the data fetched from the json file with mustache.js start-->
 <!--mustache.js template code-->
 <script type="text/template" id="mustacheTemplate">
 {{#hunklessons}}
  <div id="info">
  <h3>{{name}}</h3>
  <img src="{{photo}}" style="height:100px;" alt="image of {{name}}">
  </div>
 {{/hunklessons}}
 </script>
 <!--formating the data fetched from the json file with mustache.js end-->
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $.getJSON('hunklessons.json', function(data){//get the data from json file
   var temp = $('#mustacheTemplate').html(); //target the mustache.js template code
   var html = Mustache.to_html(temp, data);//using mustache.js to_html function to match template from the json data
   $('#rotaor').html(html);//put the data to the rotaor div

   $('#rotaor').cycle({ //using cycle.js plugin
    fx: 'fade',
    pause: 1,
    next: '#nxt_btn',
    prev: '#prev_btn',
    speed: 500,
    timeout: 1000
   });
  });
 });
 </script>

json

{"hunklessons":[
 {
  "name":"husain saify",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 },
 {
  "name":"hunk lessons",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZ8Dc5YPz139SECKcfjInGQJRj_hfp1rgwKJYlRzkms6E8K8hMKamhYkBAX7bOH25PJq1b71nLnN8XR9IvN4L7Nob-LKAmEKP789o5rXK-PshLR4PynBOCslR_LeCfoEIE3YuxOWYgwOT/s1600/hunlessonslogo.png"
 },
 {
  "name":"Embed Youtube Videos With JavaScript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_j54IvA7Aq33ki6M3434urcid27n0ClRiqmBMM8vMYCDN5ridXXSD0G9a7XjN8Fat-aK_9zinWWH2kkjoWRAK-ZzVW8apBEPXFyIJZnIXaOtW2Oab9Aj1eyI10c_LUX8IUju6axtlNzYC/s1600/embed-yt-videos.png"
 },
 {
  "name":"Drag and Drop Game With html5 & javascript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilI4aVbre0Eb3XiyTw-OgU4zpKCZn3biRSMOwpEENgAUjNQDtKXEO7u6SAWvZrowC7dLaiVNFp_2RgETn8lcU2Hrk3q7B0lYOL3xc6Uql4xVLofm2Rm6RcqtWxFVIkmRVzLu10rMEtivdM/s1600/dragndropgame.png"
 },
 {
  "name":"Css3 Progress Bar",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2C5B0K11byBRwxtZf16Pyvoib-Iuurh65LTBZniZNlli-4hqB7Zom8xMNZJtV7XoKCUqZGv5E9LdQst61c-5C7r_zRks1CimgyUEg6xn8aJR2BXK4KhEjw_xI4hhZV5FCZ7dwp9UlnRD/s1600/cssprogressbar.png"
 },
 {
  "name":"jQuery Username Availability check",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4STXWSx7wncxFrAvo6C5kzbqP3L0NBWjE1HdDVcKdNMem9aBeBiKtxCiyIqtHraMMoapeInyVRcNGBajUoa_Y86j82oGyyCyHqSZsOxS_JTYYDbWE6P4ppenZhUSivnbdhf9zhT-JmwJ/s1600/username+available.png"
 },
 {
  "name":"Select And Upload Multiple Images With jQuery & Ajax",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31ZFckzzjR2X33q0m5HhqCQr8jWYO8dfDdVBq-ZdhYnYxlM-4f_WElDsSB3ow_obcsS7soAuAkcQMzrC5UG9qUFzEe7F-tGZPY9pXRxtg5i5B2CbJGF3agXsu8uE3P_Q_zUY9Wcz1zWz0/s1600/selectanduploadmultipleimaes.png"
 },
 {
  "name":"hunk husain",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 }
]}

Like Us on Facebook / Add Hunk As Friend