Geek asks and answers

Dynamically updated image rotator in jQuery / HTML5

So, I understand that there are many free image rotators, etc., using things like jQuery. My problem, however, is there a way to dynamically update the image rotator without refreshing the site page?

So basically you are showing ten images, and after 1 hour you have a script to delete old images, add ten new images and a new xml file, do you need to refresh the page? Or the script always dynamically checks the xml file, so you do not need to update.

ps it should not be in jQuery, maybe HTML5 or like it - I just want to be able to add and remove images from the folder and automatically update the rotator to use what's in the folder

+5
source share
6 answers

I think that it is best, if at all possible, to work in the gallery without doing anything that might require reinitialization. The approach below is aimed at achieving this goal by replacing gallery images without replacing the img nodes themselves.

First, let's say that the server code is up and running and returns by any means json, which is equivalent when decoding:

[
    "images/aaa.jpg",
    "images/bbb.jpg",
    "images/ccc.jpg",
    "images/ddd.jpg",
    "images/eee.jpg",
    etc.
]

Then:

$(function(){
    var $galleryImgs = $('#myGallery img');//gallery img nodes in a jQuery wrapper.
    var updateGallery = function() {
        $.ajax({
            url: 'getImageUrls.php', //or whatever
            data: {
                n: $galleryImgs.length //specify how many new image urls to fetch
            },
            dataType: 'json',
            success: function(data) {
                $.each(data, function(i, url) {
                    if($galleryImgs[i]) { //safety
                        $galleryImgs[i].src = url; //replace each gallery image in turn
                    }
                });
            }
        });
    };
    var galleryInterval = setInterval(updateGallery, 60*60*1000);//60*60*1000 for one hour; 30*60*1000 for half an hour
});

Thus, the gallery plugin (I hope) will continue to rotate, blissfully not realizing that its images have been changed. Some plugins in the gallery may be more amenable to this than others β€” experiments are needed.

+5
source

, . , . , , script ajax.

(-) :

 refreshShow = function() {
    $.ajax({
      url: 'imagefeed.json',
      dataType: 'json',
      type: 'post',
      data: {
        gallery: 'homeGallery'
      },
      success: function(data) {
        $('#homeGallery img').remove();
        $.each(data, function(i, image){
          $('#homeGallery').append(
            $('<img />').attr('href', image.path)
          )
        });
      }
    });
  };

:

$(function(){
  setTimeout(function(){ refreshShow() }, 30000); //polls every 30 seconds for updates
});

JSON , , . SO JSON . , , - , .

+2

, , URL-, , , , :

http://example.com/imagenames

json :

{
   images: ["i1.jpg", "i1.jpg", "i1.jpg", "i1.jpg", "i1.jpg"],
   version: 12
}

- URL-, , , . , , .

: : http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_api.html

0

- Server Side Language Ajax. , PHP , :

A) .

B) setTimeout(); , Ajax PHP, , json .

C) , JSON.

:

[PHP]

$listOfImages = new array();

foreach( glob("/uploads/*.jpg") as $file ){
    array_push( $listOfImages, $file ); // gets an array of all the jpgs in the uploads directory
}
return json_encode( $listOfImages );

[JQuery]

<script type='text/javascript'>


    $(function($){
        var slider = new Slider(); //Pseudo-class for a slider
        setTimeout(function(){

           $.ajax({
             url:"update-slider-with-images.php",
             type:"post",
             dataType:"json",
             success:function(data){

               slider.clearAllImages(); //pseudo function to remove images from slider

               var images = JSON.parse( data );
               for(image in images){

                  slider.addImage( image ); //Psuedo function to add image to the rotation queue

               }

               slider.slide(); // Pseudo function to start the slider

            }

         });

        },300000); // check every 6 minutes

    });

</script>

, , , , - , , , PHP. , , . , Rails , , ASP.Net .

0

, . ajax

/basic_stats/graph.png?graph.type=IMAGE

/basic_stats/graph.png - , . , , png jpg. , , Redis, /basic _stats/graph.png? . request.params ['some_key_value'] . - ajax , .

__init __. py

config.add_route('ImageSlider', '/images/ImageSlider.png')

views.py

@view_config(route_name='ImageSlider')
def ImageSlider(request):
    imgData = None
    if 'graph.type' in request.params:
        if request.params['image.name'] == 'ImageSlider1':
            r_server = redis.Redis('127.0.0.1')
            imgDataObj = r_server.get('ImageSlider1')
            del r_server
            imgData = pickle.loads(imgDataObj)
        elif request.params['image.name'] == 'ImageSlider2':
            r_server = redis.Redis('127.0.0.1')
            imgDataObj = r_server.get('ImageSlider2')
            del r_server
            imgData = pickle.loads(imgDataObj)
    return Response(body_file=imgData, content_type='image/png')

Redis , FS PIL ex

imgData = Image.open("/images/ImageSlider1.png")

, .

src="/images/ImageSlider.png?image.name=ImageSlider1"
src="/images/ImageSlider.png?image.name=ImageSlider2"

, . Redis - , -. , , , , , , . , , , .

, , .

, Backbone.js src , Backbone.js , , Backbone.js.

Redis

0

jQuery, .

JW Image Rotator, XSPF, RSS ASX.

xml, . Flicker, RSS-, .


, , Image Rotator - setTimeout. playlist.xml, , .


, playlist.xml , , , ( RSS-URL , ).

, , 01.jpg 10.jpg, JW Image Rotator .

, . , , , .


DEMO , , , - .


DEMO jsFiddle, .

DEMO jsFiddle , .

pastebin , .

To try this DEMO locally, you will need an open source JV Image Rotator , currently on v3.18, which now has the JW watermark, but v3.17 does not have this ... it is zipped HERE and includes all the source files. including .fla flash files.

DEMO also contains a link to JW Image Rotator JavaScript API commands that are not even used ... but they are easily accessible to configure even more!

0
source

More articles:


All Articles