The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Alternate Images HTML : Widget

View previous topic View next topic Go down

Solved Alternate Images HTML : Widget

Post by Bones! on March 11th 2015, 2:41 am

So my goal is to make a widget that cycles Images randomly. I want to put a good 10 images and just have it randomly display every time it's seen. (Like if you go to a new page of the forum, the image changes.)

I think I saw this a while back under the name of "Limages" or something.

And a variation of this with Javascript for the Cursors (Namely Halloween)

Can anyone help me with this?


Last edited by Kaseki on March 22nd 2015, 10:08 pm; edited 1 time in total

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by brandon_g on March 11th 2015, 3:12 am

So you would like this done using html? Are you trying to make this widget on an html page or something? If you may elborate further I may be able to see if I can help (HTML is the only code I am really good at at present Razz).

-Brandon


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5140
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by _Twisted_Mods_ on March 11th 2015, 3:02 pm

this is code for affiliates system i made i edit it a bit so should work for u



  1. Go to Modules > Portal & Widgets > Portal management
  2. Click on "Structure"
  3. Select "Create a widget" with these settings :


    • Widget name : Your Choice

    • Widget title : Your Choice

    • Enter the following code in "Widget source" : (affl is the list of images replace imageurl with the url of the image you would like, add more images by adding another 'imageurl' each one needs to be seperated by a comma...afftime is the time it changes images it goes by milliseconds. right now its set to change images ever 5 seconds, )





Code:
<div id="tm_affsystem">
<center>
</center>
</div>
   
<script>
   jQuery(function(){
   afftime = 5*1000;
   affl = ['http://sd-1.archive-host.com/membres/up/132720629421430912/staff-forumactif/nonew.png','http://sd-1.archive-host.com/membres/up/132720629421430912/staff-forumactif/nt.png']
   jQuery('#tm_affsystem center').html('<img src="'+affl[0]+'">');
   ff = 0;
   setInterval(function(){ if(ff==affl.length-1){
      jQuery('#tm_affsystem center').html('<img src="'+affl[ff]+'">'); ff=0; }else{
         jQuery('#tm_affsystem center').html('<img src="'+affl[ff]+'">');
         ff++
      };
                                    }, afftime);
});
</script>

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by Bones! on March 12th 2015, 8:44 pm

I mean BBC doesn't work in widgets...

That wasn't what I thought originally... but this will do.

Thank you Twisted~

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by Bones! on March 21st 2015, 8:42 pm

Can this be edited to show in a random order?

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by Ange Tuteur on March 22nd 2015, 1:13 am

Try adding this to a widget :
Code:
<div style="text-align:center">
  <img id="rotator" src="http://illiweb.com/fa/empty.gif" alt=""/> 
</div>
<script type="text/javascript">//<![CDATA[
(function() {
  var images = [
    'image1',
    'image2',
    'image3',
    'image4'
  ],
  changeTime = 3000,
     
  a = document.getElementById('rotator');
  a.src = images[Math.floor(Math.random() * images.length)];
  window.setInterval(function() {
    a.src = images[Math.floor(Math.random() * images.length)]
  },changeTime);
})();
//]]></script>

There's two settings :
images : This is an array of images you want to display. The images should be wrapped with quotes, and multiple images should be separated by a comma. You can have more or less depending on what you want. I just added a few as an example.

changeTime : The amount of time it takes to change the image. It uses milliseconds, so 3000 = every 3.0 seconds. It's randomized so every 3 seconds it'll display a random image.

If any questions, let me know.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by Bones! on March 22nd 2015, 4:27 am

@Ange Tuteur wrote:Try adding this to a widget :
Code:
<div style="text-align:center">
 <img id="rotator" src="http://illiweb.com/fa/empty.gif" alt=""/>
</div>
<script type="text/javascript">//<![CDATA[
(function() {
 var images = [
  'image1',
  'image2',
  'image3',
  'image4'
 ],
 changeTime = 3000,
 
 a = document.getElementById('rotator');
 a.src = images[Math.floor(Math.random() * images.length)];
 window.setInterval(function() {
  a.src = images[Math.floor(Math.random() * images.length)]
 },changeTime);
})();
//]]></script>

There's two settings :
images : This is an array of images you want to display. The images should be wrapped with quotes, and multiple images should be separated by a comma. You can have more or less depending on what you want. I just added a few as an example.

changeTime : The amount of time it takes to change the image. It uses milliseconds, so 3000 = every 3.0 seconds. It's randomized so every 3 seconds it'll display a random image.

If any questions, let me know.
My final question is is it possible to make it so the first image is randomized as well?

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by Ange Tuteur on March 22nd 2015, 5:35 am

As a placeholder src for the image element I used a blank image. When the script executes it'll choose a random image to display, then after 3 seconds it'll show another random image.

So, as long as JavaScript is enabled the first image will always differ. This snippet sets the image's src as a random image from the array :
Code:
a.src = images[Math.floor(Math.random() * images.length)];

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by Bones! on March 22nd 2015, 10:08 pm

@Ange Tuteur wrote:As a placeholder src for the image element I used a blank image. When the script executes it'll choose a random image to display, then after 3 seconds it'll show another random image.

So, as long as JavaScript is enabled the first image will always differ. This snippet sets the image's src as a random image from the array :
Code:
a.src = images[Math.floor(Math.random() * images.length)];
I tested it with a larger image pool.

THANK YOU!

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Alternate Images HTML : Widget

Post by Ange Tuteur on March 22nd 2015, 11:10 pm

You're welcome Smile

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum