i need help with a image (fade in fade out)

[santyago]

hi all, hope one of you will help me to resolve my problem
here is my forum  botwro.proboards.com/

the picture what i circle with green i want to made it fade in fade out over my banner , also when a user click on it i want to redirect him to site
but i dont know how to do that , i have tried a few codes and stuff but no solution ......i am a noob i know
thx in advance

[Tumbleweed]

Apr 3, 2015 14:51:16 GMT -8 santyago said:

hi all, hope one of you will help me to resolve my problem
here is my forum  botwro.proboards.com/

the picture what i circle with green i want to made it fade in fade out over my banner , also when a user click on it i want to redirect him to site
but i dont know how to do that , i have tried a few codes and stuff but no solution ......i am a noob i know
thx in advance

Looking at your site, it appears the part you want to fade in/out is part of the rest of your banner, all in one image. You need that to be a separate image. Just wanted to clarify, do you mean fade in if you hover over your banner? Just making sure you aren't wanting it to just be fading in and out automatically, like an gif animation.

[santyago]

Apr 4, 2015 0:35:37 GMT -8 Tumbleweed said:

Apr 3, 2015 14:51:16 GMT -8 santyago said:

hi all, hope one of you will help me to resolve my problem
here is my forum  botwro.proboards.com/

the picture what i circle with green i want to made it fade in fade out over my banner , also when a user click on it i want to redirect him to site
but i don't know how to do that , i have tried a few codes and stuff but no solution ......i am a no ob i know
THC in advance

Looking at your site, it appears the part you want to fade in/out is part of the rest of your banner, all in one image. You need that to be a separate image.&NBS;Just wanted to clarify, do you mean fade in if you hover over your banner? Just making sure you aren't wanting it to just be fading in and out automatically, like an Giff animation.

"You need that to be a separate image"
i know that banner is 1 image the second image over the banner is another image is a pang
"do you mean fade in if you hover over your banner"
after the page is loaded in 1 or 2 seconds the second image to appear over banner then in 1 or 2 seconds to disappear so on ....
"aren't wanting it to just be fading in and out automatically, like an gif animation"
i prefer to not do that

[Tumbleweed]

Apr 4, 2015 6:03:16 GMT -8 santyago said:

Apr 4, 2015 0:35:37 GMT -8 Tumbleweed said:

Looking at your site, it appears the part you want to fade in/out is part of the rest of your banner, all in one image. You need that to be a separate image.&NBS;Just wanted to clarify, do you mean fade in if you hover over your banner? Just making sure you aren't wanting it to just be fading in and out automatically, like an Giff animation.

"You need that to be a separate image"
i know that banner is 1 image the second image over the banner is another image is a pang
"do you mean fade in if you hover over your banner"
after the page is loaded in 1 or 2 seconds the second image to appear over banner then in 1 or 2 seconds to disappear so on ....
"aren't wanting it to just be fading in and out automatically, like an gif animation"
i prefer to not do that

Does that image keep fading in and out over and over again because that could annoy some members. I ask because you say "disappear so on.." so I guess I'm still a bit confused. I don't want to give you anything to try, if I'm getting it wrong.

 Is sort of what you want? (Except of course with your image and not the mask-like image I have on.)

putteraround2.proboards.com/

[santyago]

"putteraround2.proboards.com/"
yes that is what i want
finally some one find a solution
thx
can you explain me how to do that ?

[Tumbleweed]

Apr 6, 2015 3:42:27 GMT -8 santyago said:

"putteraround2.proboards.com/"
yes that is what i want
finally some one find a solution
thx
can you explain me how to do that ?

The first thing you'll want to do is go to: Admin> Themes> Layout Templates>and click on the "Forum Wrapper" template. Find this section around line 16 and then add this....

<img class="images" src="http://i657./uu300/EliteList/Bows/MaskTemplate_zpsaa1614d2.png">

........right below: $[forum.title] as I did below and replace the blue part with the image you want to fade in/out.

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
<img class="images" src="http://i657./uu300/EliteList/Bows/MaskTemplate_zpsaa1614d2.png">
</h2>
</div>

Now you'll need some css to position it where you want it and to give it a size, etc. so for now, until you get it adjusted where you want the image, you can add this css right above the coding I posted above.

<style>
.images{display:none; position:absolute; top:8px; right:10px; height:100px; width:60px;
 }
</style>

In the CSS above, adjust the top and right so you get the image where you want it and put in the height and width of your image in there where I have 100px and 60px.

Now you need some Jquery to make the fade happen.

I put my jquery toward the bottom on the wrapper template right above how I have it below: (The bolded red is the jquery you add and the plain text is what your paste it above.

<script>
$(document).ready(function() { 
var images = $(".images");
var imageIndex = -1;
 function showNextImage() {
++imageIndex;
images.eq(imageIndex % images.length)
.delay(2000).fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextImage);
}
 showNextImage();
})();
</script>

{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>

That is all you need to do but here is some extra info:

This is set up in case you ever want to add more images into the rotation of fading in/out. If you want to add more images you'll just copy that line that has the image and paste it right below the very line you copied and then edit the new line with the image you want in in the rotation.

Lastly, once you get everything the way you like it, you can move that css to the very bottom of your style sheet and you may want to add a comment what this does so in the future you wont' wonder what it is and you have to remove the <style> & </style> tags. (You absolutely do not have to do this, you can just leave the css where it is in the wrapper template but I recommend you just move it to your style sheet where all your css is located.)

Admin> Themes> Advanced Styles & CSS> Style Sheet>

And it should look like this:

/* Fade image over banner */
 .images{display:none; position:absolute; top:8px; right:10px; height:100px; width:60px;
}
 
 

Let me know if you run into any issues.

[santyago]

big thx
i tested is working