Skip to content

Instantly share code, notes, and snippets.

@mediaupstream
Created October 3, 2011 21:29
Show Gist options
  • Select an option

  • Save mediaupstream/1260308 to your computer and use it in GitHub Desktop.

Select an option

Save mediaupstream/1260308 to your computer and use it in GitHub Desktop.

Revisions

  1. mediaupstream revised this gist Oct 3, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion example.js
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ function loadImages (url, container){
    $(container).append(slide);
    });
    // initialize anythingSlider
    $('container').anythingSlider();
    $(container).anythingSlider();
    }
    });
    };
  2. mediaupstream revised this gist Oct 3, 2011. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions example.js
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,9 @@
    */
    {
    "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"}]
    {"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"}
    ]
    }

    @@ -22,8 +22,7 @@ function loadImages (url, container){
    $.getJSON(url, function(data){
    if(typeof data === 'object'){
    // create the HTML markup for the slider from data
    $.each(data['images'], function(key, val){
    var image = val[0];
    $.each(data['images'], function(key, image){
    var slide = '<li><img src="'+image['url']+'" alt="'+image['title']+'"></li>';
    $(container).append(slide);
    });
  3. mediaupstream revised this gist Oct 3, 2011. 1 changed file with 23 additions and 23 deletions.
    46 changes: 23 additions & 23 deletions example.js
    Original file line number Diff line number Diff line change
    @@ -2,11 +2,11 @@
    * 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"}]
    ]
    "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"}]
    ]
    }


    @@ -18,23 +18,23 @@
    */

    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, val){
    var image = val[0];
    var slide = '<li><img src="'+image['url']+'" alt="'+image['title']+'"></li>';
    $(container).append(slide);
    });
    // initialize anythingSlider
    $('container').anythingSlider();
    }
    });
    // 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, val){
    var image = val[0];
    var slide = '<li><img src="'+image['url']+'" alt="'+image['title']+'"></li>';
    $(container).append(slide);
    });
    // initialize anythingSlider
    $('container').anythingSlider();
    }
    });
    };

    $(function(){
    loadImages('images.json', '#slider1');
    loadImages('images.json', '#slider1');
    });


    @@ -45,11 +45,11 @@ $(function(){
    */
    <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>
    <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>
    <ul id="slider1"></ul>
    </body>
    </html>
  4. mediaupstream created this gist Oct 3, 2011.
    55 changes: 55 additions & 0 deletions example.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    /**
    * 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, val){
    var image = val[0];
    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>