Banner image automatic rotation inquiry

(Yogi Bear50) #1

Hi all


Is it possible to create a banner image rotation which will run automatically when people uploads a new banner at anytime.



For example i tried to do the following and its not working.


  1. Created an asset listing page pointed it to the root node which is image folder
  2. Then on the list format I selected Random
  3. Made the asset listing live
  4. then pointed the asset id number of the asset listing on the custom.css file
  5. then applied the custom design to a page and nothing happens



    Is this possible or not, i have another way which is using javascript and gif images which works fine but that is a bit painful beacause when a user adds a new one it want take effect.



    Hopefully this makes some sense.



    Cheers :unsure:
(Robin Shi) #2

i think the better way is to use the full list which is generated by asset listing and have JS randomly pick up the image. You will need to have a trigger to clear the cache for the asset listing when a new image has been added.
List format: Random may not work because of the cache.

(Ckrummenacher) #3

Hi there,
We quite often use javascript to get around the caching issue. Have a default image display for users without javascript. Then do an ajax call to your asset listing with a blank design on it to get a list of all images. Then do whatever you need to using javascript - ie, randomise and preload, then cycle them or similar. Hope this helps.



Edit: Typo

(Ckrummenacher) #4

Heres a basic example (in jQuery) of what you could do - just pass in the element that you want to have the images in and the href of your assetlisting. The assetlisting is just urls.



    
    
    function slideShow(el, href){
    	$.get(href, function(msg){ //get list of urls
    		msg = msg.split("http://") //split them by the http tag
    		var preload = [] //create array of images
    		for(i=0;i<msg.length-1;i++){ //cycle through urls
    			if("http://" + msg[i+1] == $(el).attr('src')){ //if url is same as initial image
    				preload[i] = new Image(); //create new image
    				preload[i].src = preload[0].src; //copy array[0].src to current position src
    			 	preload[0].src = "http://" + msg[i+1]; //insert url of initial image into position zero
    			} else {
    				 preload[i] = new Image(); //create new image
    				 preload[i].src = "http://" + msg[i+1]; //add src
    			}
    		}
    		i = 0;
    		slideShowTimer = window.setInterval(function(){	
    			if(i==preload.length-1){ //if at end of cycle start again from beginning - uncomment clear interval if it should stop
    				i = 0;
    				//clearInterval(slideShowTimer); 
    			}
    			
    			$(el).fadeOut("slow", function(){ //fade/swap images
    				$(el).attr('src', preload[i].src).fadeIn();
    			})
    			i++;
    		},4000); // time delay in milliseconds     
    	})
    };
(Darren Johnston) #5

Is it possible to create a banner image rotation which will run automatically when people uploads a new banner at anytime.




your nearly there

[list=1]

  • create an asset listing (of images only under the root node, random order)
    [*]add a nested content area <MySource_AREA id_name="banner_image" design_area="nest_content" /> to the design where the image would be located
    [*]create a design customisation and link the nested content area to the banner asset listing in your site
    [*]this will rotate refresh depending on your cache settings