We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[ C ] Image Display Box above Shoutbox
Topic Started: Dec 22 2012, 11:03 AM (367 Views)
LEE200
Member Avatar
Member
[ * ]
Hello Guys.
I'm looking for Image display code. I have had a look on the Code section here, but can not see anything suitable.

Board Address: http://w11.zetaboards.com/GFX200/index/
Board Software: ZetaBoards
Description: I want to place an Image box about 600px x 400px above my ShoutBox on the Homepage that displays small Art Images every
lets say 10 seconds or more. Possibly one where I can add text and also the makers name or similar short description.

If I can get something very similar to this that would be great ?
Any suggestions please ? Thanks in Advance ;)
Offline Profile Goto Top
 
LEE200
Member Avatar
Member
[ * ]
Someone look at this please was posted 24hrs ago. :up:
Edited by LEE200, Dec 24 2012, 02:41 PM.
Offline Profile Goto Top
 
Minato
Member Avatar
Let Me Be With You
[ *  *  *  *  * ]
This all goes into your Board Templates

Javascript Box
Code:
 
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>


Top of Page
Code:
 
<style>
#imageRotator {
height: 500px;
width: 610px;
margin: 0px auto;
}

.rotator,
.text {
margin:0px auto;
}
</style>


Above the Board
Code:
 
<script>
$('.rotator').cycle({
fx: 'fade',
timeout: 10000
});
$('.text').cycle ({
fx: 'fade',
timeout: 10000
});
</script>

<div id="imageRotator">
<div class="rotator">
<img src='http://z3.ifrm.com/445/45/0/p420546/chiisignature.png' alt=''>
<img src='http://z3.ifrm.com/0/126/0/p20001/colours.png' alt='' />
<img src='http://z3.ifrm.com/53/36/0/p431838/gaksig.png' alt='' />
</div>
<div class="text">
<div>Blah</div>
<div>Blah 2</div>
<div>Blah 3</div>
</div>
</div>


Preview: http://w11.zetaboards.com/Minato_Codes/index/

To add new images.

Add <img src='IMAGEURL' alt='' /> to add more images. And to add the text, add <div>New Text</div>.

If you have any questions on this, let me know.
Offline Profile Goto Top
 
LEE200
Member Avatar
Member
[ * ]
Thank You Minato awesome bro !
Happy New Year mate.
Offline Profile Goto Top
 
Eccentric Feline
Member Avatar
梦想
[ *  *  *  *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic