How do I make appear a different image each time ?

Hello everyone Im new at creating websites with BS .. I want to see a different image each time I open my webpage! I now it is with some JS but not sure how to do it hehe I have 3 images and I want to display one of them and want it to change for another one each time I open the page

I tested this out and it seems to work fine. https://gist.github.com/stephenscaff/8266351

CSS

.fade-in{
  -webkit-animation: fade-in 2s ease;
  -moz-animation: fade-in ease-in-out 2s both;
  -ms-animation: fade-in ease-in-out 2s both;
  -o-animation: fade-in ease-in-out 2s both;
  animation: fade-in 2s ease;
  visibility: visible;
  -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

JS

/* 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 src="/' + images[Math.floor(Math.random() * images.length)] + '" />').appendTo('#banner-load');

HTML

<div id="banner-load"></div>

I was able to add images to a new project, edit the JS code for the appropriate image names in the array of images.

Right click on Javascript menu in the Design pane (bottom/right) selected Create JS. Double click on untitled.js and copy/paste in the JS code. Right clicked Images menu in the Design pane (bottom/right) selected Import and selected my images. Edit the untitled.js with the appropriate images names. Clicked on Styles menu in the Design pane (bottom/right), double click styles.css, copy/paste in the CSS. Drag/dropped DIV component on to the Body element in the Overview pane (bottom/left) then selected that DIV. Clicked the HTML pane (bottom/middle/left) to expose it then clicked the ATTRIBUTES pane below the HTML pane to expose it, copy/paste ID clicked APPLY. Click Preview (top/right) loaded in browser, Image appears refreshed a few times to randomly cycle through images.

Saj

Thanks a lot m8 !! very helpful :D

Im having some trouble with the CSS, it is looking like this: https://prnt.sc/j74xrr when it should be like this: https://prnt.sc/j74xgb. how or where exactly in the style.css do I paste: @-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

I could only paste : -webkit-animation: fade-in 2s ease; -moz-animation: fade-in ease-in-out 2s both; -ms-animation: fade-in ease-in-out 2s both; -o-animation: fade-in ease-in-out 2s both; animation: fade-in 2s ease; visibility: visible; -webkit-backface-visibility: hidden; }

It looks like the app will only allow @keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

You should be able to copy/paste it as it's own CSS block. It's not a property to include in a class it is it's own CSS rule.

I have no idea about why your images look different, according to the CSS I provided it shouldn't have any effect on that.

Saj

thank you very much the issue was solved :)

Now Im publishing the website but the images dont show up. I dont know why because I could see them in the preview

Very likely, the URL for the images are no longer correct in the JS code, because there is a difference between what the image path in the app is and where the resulting exported files are actually located at. I believe one thing that does not get modified for file paths is Javascript so you'll need to manually correct that. Either you do that post export or update the code in the app in which you won't then see your images in the app. Or set the URL to an absolute path, for example http://www.mywebsite.com/images.

Initial JS

$('<img src="/' + images[Math.floor(Math.random() * images.length)] + '" />').appendTo('#banner-load');

You might have to change it to something like:

$('<img src="../assets/img/' + images[Math.floor(Math.random() * images.length)] + '" />').appendTo('#banner-load');

Or the absolute path method

$('<img src="http://www.mywebsite.com/images/' + images[Math.floor(Math.random() * images.length)] + '" />').appendTo('#banner-load');

If you post the URL I can take a look and see if I can tell you what to do better.

Saj