MyBB Community Forums

Full Version: Randomization of Two Pictures
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hello everybody,

Is there any way of making the two pictures ("Show us your Projects" and "Show us your GTASA Pics" appear in the same place random? I mean when you refresh the page the second picture will appear. Not really random but to appear one time the 1st pic and the one time the 2nd pic if you know what I mean Smile

Here is a screenshot of the pictures that I'm talking about:

[Image: ssw0jzl.png]

And the link of my website: http://xdweb.ro/.

Also I attached the two blocks if anyone can help me:
[attachment=28452][attachment=28453]

Thank you very much in advance!
Are the two pictures the same size? Is the board fixed width? If so you can add a simple slideshow script in that space.
Yes they are. Can you help me with the script?
I can, but it would have to be hardcoded in the block - it already is I think.

I would recommend a slider rather than a page refresh.

http://www.scriptiny.com/2012/08/javascr...code-css3/
Thank you very much! Is there any chance of fitting it into the block_showroom.php for me? I really don't have any idea about how to make it work...
Ok, this should work though you will have to finetune the css yourself.

Put this css in your global.css

#sliderwrapper {width:578px; margin:75px auto}

.slider-button {float:left; width:32px; cursor:pointer; font-size:30px; height:32px; line-height:26px; margin-top:134px; text-align:center; color:#888; background:#fff}
.slider-button:hover {color:#222}

.sliderpagination {float:left; list-style:none; height:23px; margin:15px 0 0 32px; display:none}
.sliderpagination li {float:left; cursor:pointer; height:12px; width:12px; background:#666; border-radius:6px; margin-right:4px}
.sliderpagination li:hover {background:#777; color:#000}
li.current {background:#888}

/* TinyFader */

#slideshow {float:left; width:500px; height:300px; border:2px solid #fff; background:#fff}
#slides {position:relative; width:500px; height:300px; list-style:none; overflow:auto}
#slides li {width:500px; height:300px}
.fader-slide {opacity:0; position:absolute}
.fader-fade {opacity:1; -webkit-transition:opacity .4s; -moz-transition:opacity .4s; transition:opacity .4s}

/* Slide Styling */

#content {width:464px; height:270px; padding:15px 18px 15px 18px; background:#fff}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}

Download the tiny fader and put the fader.packed.js in your headerinclude

Try this block.
Thank you very very much for your support. I'm sorry I didn't replied these days but I've been extremely busy Sad

By the way, I added that code in global.css and I added and activated the block_slidder.php. About the fader.packed.js, I didn't added it because I really don't find where is that "headerinclude". With the code added and the block now it looks like this (crappy) Sad :

[Image: untitled53tjed.png]
It's a javascript slider. If you don't include the js then that is what it will fall back to. So you need to put the fader.packed.js in your headerinclude (in the ungrouped templates) and add the css to your global css. Then you need to edit the css to match your theme.
The problem is that I don't understand WHERE (in which location from FTP) to put the fader.packed.js file. I uploaded it in the "jscripts" folder from FTP but it doesn't work. I don't know in which path I need to upload that fader.packed.js. BTW I uploaded it in jscripts folder and now it looks like this:

[Image: untitled6d1k6o.png]
Pages: 1 2