Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
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
Kautuk Sahni
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
Kautuk Sahni
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
Kautuk Sahni
wrote...
Yes you can try ${properties.my_property}
~kautuk
Hi Kautuk,
thanks , its working now.
Related Conversations
