inherit
157369
0
Jan 15, 2019 14:32:50 GMT -8
eaststandboy
485
August 2010
eaststandboy
|
Post by eaststandboy on Jul 23, 2015 22:30:01 GMT -8
Hey
I would like to display a banner that changes every x amount of seconds (not on a pagr reload)
Is there a code that I could use which would do this?
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Jul 23, 2015 23:35:36 GMT -8
Hey I would like to display a banner that changes every x amount of seconds (not on a pagr reload) Is there a code that I could use which would do this? I just linked someone else to this code here:
www.aspsnippets.com/Articles/JavaScript-Auto-Image-Rotator-using-Timed-Image-Swap-technique.aspx
You'd need to go into your wrapper template and find this bit. The blue is what you'd replace with the html.
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
So it would look like this: (the bolded part is from that link I gave you and that is where you'd add your images you want rotated.
<div id="banner-container" role="banner">
<form id="form1">
<div id="rotator">
<img alt="" src="http://www.aspsnippets.com/images/Blue/Logo.png" />
<img alt="" src="http://jqueryfaqs.com/images/Blue/Logo.png" />
<img alt="" src="http://www.aspforums.net/images/blue/Logo.png" />
</div>
</form>
</div>
Then copy the script part and either paste in your global headers or at the bottom of the wrapper template.
Important tips: 1. Do not copy any of this from that site: <html xmlns="http://www.w3.org/1999/xhtml">,<head>,<title>,</title>,</head>,<body>,</body> or </html> 2. Use the same size images in the rotation. 3. You can have a image already in the normal banner area so while the rotation starts there is an image there as long as none of your images in the rotation are transparent but you need to add the banner here: Admin>Themes>Advanced Styles & CSS>Visual Editor>Header(top)>Forum Banner>Banner Image 4. You will need to add this css to hide the images until the rotation starts because for some reason they all show at the beginning and to set the size if you decide against a banner via #3.
<style>
#rotator{height:100px;}
#rotator img{display:none;}
</style>
You can just put that above this line: <div id="banner-container" role="banner"> or you can just add the bolded part to the bottom of your style sheet.
5. In the javascript part you will see this....
}, 1000);
};
</script>
at the end. The 1000 controls the speed. If you want it slower, bump that up to 2000. I doubt you'd want it faster as that may drive your members nuts but 500 would be super fast.
Hope that helps.
|
|
inherit
157369
0
Jan 15, 2019 14:32:50 GMT -8
eaststandboy
485
August 2010
eaststandboy
|
Post by eaststandboy on Jul 24, 2015 14:38:30 GMT -8
Thanks, i cant see blue or bold text im Your post :s give me a week and I might get there  |
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Jul 24, 2015 19:33:38 GMT -8
Thanks, i cant see blue or bold text im Your post :s give me a week and I might get there Oh sorry, hopefully this might help:
Find this....
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div
and remove this part.....
<h2 id="banner">
$[forum.title]
</h2>
and in place of the part you just removed, add this....
<form id="form1">
<div id="rotator">
<img alt="" src="http://www.aspsnippets.com/images/Blue/Logo.png" />
<img alt="" src="http://jqueryfaqs.com/images/Blue/Logo.png" />
<img alt="" src="http://www.aspforums.net/images/blue/Logo.png" />
</div>
</form>
.....so it will now look like this.....
<div id="banner-container" role="banner">
<form id="form1">
<div id="rotator">
<img alt="" src="http://www.aspsnippets.com/images/Blue/Logo.png" />
<img alt="" src="http://jqueryfaqs.com/images/Blue/Logo.png" />
<img alt="" src="http://www.aspforums.net/images/blue/Logo.png" />
</div>
</form>
</div>
Hope that helps a little. Post back if you run into trouble or have further questions.
|
|
