Banner image change after refresh the page

Hi Varun

Yes, this can be done. But i am not able to understand the use-case here. What is the ask that for every refresh we need new image?

Carousel component could be used with increased time to switch image.

Otherwise you can write a custom component where in you can put a logic in the JS that will create a random number every time the page loads and then use this random number to access the arrey's index having paths for images.

Refer to this post :- http://stackoverflow.com/questions/29933027/refreshing-page-with-a-new-image

Also See this example :- https://gist.github.com/stephenscaff/8266351

~kautuk

Yes, Kautuk is right.

You can create a carousel component or you can create a custom component to generate random number for images path.

Additionally:

http://stackoverflow.com/questions/16428154/javascript-random-image-selected-on-refresh

JS:

var description = ["http://static.ddmcdn.com/gif/lightning-gallery-17.jpg","http://static.ddmcdn.com/gif/lightning-gallery-18.jpg","http://static.ddmcdn.com/gif/lightning-gallery-19.jpg","http://static.ddmcdn.com/gif/lightning-gallery-20.jpg","http://static.ddmcdn.com/gif/lightning-gallery-21.jpg"];var size = description.lengthvar x = Math.floor(size*Math.random())document.getElementById('image').src=description[x];

HTML:

<img id="image" />

make sure you should use onload handler.

~ Prince

Hi Kautuk/Prince,

I am agree with , the best solution is carousel but requirement is images should be change only if user refresh the page.

I am trying to use the same thing by JS and its working.But in some case we need to display 30-35 images and If I will load all images on page then it will be performance issue.

Is there any way to load the image from dam on each window refresh, like same thing:

var description = ["http://static.ddmcdn.com/gif/lightning-gallery-17.jpg",];

but in place of preloading all images load image one by one from dam.

Regards,

varuns46785756 wrote...

Hi Kautuk/Prince,

I am agree with , the best solution is carousel but requirement is images should be change only if user refresh the page.

I am trying to use the same thing by JS and its working.But in some case we need to display 30-35 images and If I will load all images on page then it will be performance issue.

Is there any way to load the image from dam on each window refresh, like same thing:

but in place of preloading all images load image one by one from dam.

 

Regards,

 

 

Hi

In the solution provided by me, we are not preloading any images images. we are just saving character string array with path to images.

<script>
//Add your images, we'll set the path in the next step
    var images = ['banner-1.jpg', 'banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg];
    
//Build the img, then do a bit of maths to randomize load and append to a div. Add a touch off css to fade them badboys in all sexy like.
    $('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-load');
</script>

So here only a image would be loaded. Please check this and do let me know if other images are also getting loaded. You can verify this in network response.

PS: Assets are already there in the DAM, so we are just referring them in our page.

Demo Test

HTML:

<img  id="myImage" />

JS:

var myImageElement = document.getElementById('myImage');
myImageElement.src = "http://lorempixel.com/400/200/?"+Math.random();
setInterval(function() {
    var myImageElement = document.getElementById('myImage');
    myImageElement.src = "http://lorempixel.com/400/200/?"+Math.random();
    console.log(myImageElement);
}, 10);

~kautuk

Hi Kautuk,

In netwrok , I am getting path of all the images.Its working.I am trying to give " /content/dam/myfolder/images" path to fetch images randomly in place of giving each images name in var

var images = ['banner-1.jpg', 'banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg]; trying to replace by "/content/dam/myfolder/images"

because I am using as background image,when I am using lorempixel its working and giving random images but when I am using /content/dam/myfolder/images then its not giving any result.Is it lorempixel functionality to changing images or its math.random().

document.getElementById("branchpageHeroMinneapolisFPO").style.backgroundImage = "url(http://lorempixel.com/400/200/?" +Math.random() +")";

document.getElementById("branchpageHeroMinneapolisFPO").style.backgroundImage = "url(content/dam/myfolder/image/" +Math.random() +")"; : its not working.

Regards,

Hi ,

Please suggest ,on this requirement.

Regards,

Hi

Math.random() : is a java script function that creating a random number and which is getting appended to the URL string. Here in case of "lorempixel" it is getting appended as query parameters where as in case of url(content/dam/myfolder/image/" +Math.random() +")";  it is getting appended as part of URL string (which is also right) but make sure that the URL string getting created from this function is actual path in the instance.

The way you are doing "content/dam/myfolder/image/" +Math.random() " :- it would create something content/dam/myfolder/image/.345788, Which i would feel is not anything in the instance so it is resulting into error. 

also you can not use "Math.random()" as it is as it returns value between 0 and 1, use it to generate a integer between two values:

    function getRandomInt(min, max) {
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min)) + min;
    }

and make sure final URL String created by this is a valid URL in the instance.

Otherwise, you can create a custom OSGi service which will do what "lorempixel" is doing here.

~kautuk

Hi Kautuk,

Thanks for your response:

currently I have all the images full path in pageProperties( property name: bannerImage) in array and at component level I am using like this:

can I replace var images[]  value with my pageProperties( bannerImage) value.Please suggest.

<script type="text/javascript">

$(document).ready(function(){

    function Randomize() {

      var images = [

        "content/dam/locations/images/landing-images/arizona/phoenix/image-branchpage-hero-Phoenix-02.jpg",
        "content/dam/locations/images/landing-images/arizona/phoenix/image-branchpage-hero-Phoenix-03.jpg",
        "content/dam/locations/images/landing-images/arizona/phoenix/image-branchpage-hero-Phoenix-01.jpg"
          ];

        var random = Math.floor(Math.random()*images.length);

        $(".banner_80vh-parallex").css({"background" : "url('/../../" + images[random] + "')"});

    }
                
    Randomize();
});

</script>

Yes you can try ${properties.my_property}

~kautuk