Skip to content

Instantly share code, notes, and snippets.

@mediaupstream
Created October 3, 2011 21:29
Show Gist options
  • Save mediaupstream/1260308 to your computer and use it in GitHub Desktop.
Save mediaupstream/1260308 to your computer and use it in GitHub Desktop.
Load Images from JSON into AnythingSlider
/**
* file: images.json
*/
{
"images": [
{"title": "Image One", "url": "image1.jpg", "rating": "3.5"},
{"title": "Image Two", "url": "image2.jpg", "rating": "1"},
{"title": "Image Three", "url": "image3.jpg", "rating": "5"}
]
}
/**
* file: application.js
*/
function loadImages (url, container){
// get the JSON object
$.getJSON(url, function(data){
if(typeof data === 'object'){
// create the HTML markup for the slider from data
$.each(data['images'], function(key, image){
var slide = '<li><img src="'+image['url']+'" alt="'+image['title']+'"></li>';
$(container).append(slide);
});
// initialize anythingSlider
$(container).anythingSlider();
}
});
};
$(function(){
loadImages('images.json', '#slider1');
});
/**
* file: index.html
*/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="application.js"></script>
</head>
<body>
<ul id="slider1"></ul>
</body>
</html>
@shklqm
Copy link

shklqm commented Jul 14, 2014

To get it working properly in chrome you might need a basic HTTP server. If you have python installed, you can run one of the following commands in the top level of this project.

Python 2.x

     python -m SimpleHTTPServer

Python 3.x

     python -m http.server

@ashishnamdeo
Copy link

not working.................

@BharatT
Copy link

BharatT commented Mar 26, 2015

can you send complete description and all code.

@sunil-srma
Copy link

jquery.anythingslider.js path is incorrect !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment