Scrolling/fading image block [Archive]

View Full Version : Scrolling/fading image block

mholtum

05-03-2005, 06:11 AM

This is similar to this (http://www.vbadvanced.com/forum/showthread.php?t=1442) module, but is not dependant on having any other hack installed.

What this does:This module displays your button images that will be faded and scroll from the bottom to the top of the module. On mouseover they will unfade and stop.

1: You will need to create a template called adv_portal_banners and include the following code:



<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="175">
<tr>
<td class="tcat"><span class="smallfont"><strong>$vba_options[portal_blockbullet] Sponsors</strong></span>
</td>
</tr>
<tr>
<td class="$getbgrow" width="100%">

<SCRIPT src="fading.js"></SCRIPT>
<MARQUEE behavior= "scroll" align= "center" direction= "up" height="120" scrollamount= "2" scrolldelay= "15" onMouseOver="this.stop()" onMouseOut="this.start()">
<center>

<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>

</center>
</Marquee>
</td>
</tr>
</table>
<br />



2: Create a module

Module Title: Banners (or whatever you wish)
File to Include: none
OR Template to Include: banners (If you named the template above adv_portal_banners)
Active: Yes
Templates Used:adv_portal_banners

3: Upload the fading.js file to the root dir of your site. (Not the forum root)

ZED28

05-28-2005, 01:53 PM

mholtum

05-28-2005, 02:41 PM

Nice work but is there any way you can have the URL's called from a seperate file? This way, you would avoid having to modify every theme on your site when you add/change sponsor links.

Better still would be the ability to add the URL's from the Banner Module directly in the vBa CMPS section. :)Thats what this one does, as it relys on the installation of another hack.
http://www.vbadvanced.com/forum/showthread.php?t=1442 I was trying to keep it simple.

Loco Macheen

05-31-2005, 02:15 AM

3: Upload the fading.js file to the root dir of your site. (Not the forum root)

i don't understand this part ? my forum is in my root dir /public_html/ ? i upload the .js file to the public_html right ? and i added one link and a banner image, but i don't see anythign in the box.. am i missing something ?

mholtum

05-31-2005, 02:30 AM

Yes the fading.js file goes into the public_html folder.
Did you use the correct path to the image in the template? Do you have a link to your site?

Loco Macheen

05-31-2005, 02:36 AM

ah, got it working now :) i guess the folder i had the images in wouldn't show the images ?

but i did just notice that it didn't scroll or fade,in firefox.. is this normale ie firefox clashing ?

i have the "newest post" as a scrolling block and it works with FF, i may just have to play with it some.. i may get time by next weekend..lol

thx for the block :)

mholtum

05-31-2005, 02:54 AM

works for me in firefox. http://www.ravensrealm.net

Loco Macheen

06-01-2005, 11:24 AM

yup, sure does for you ?.. i don't know i'll have ot look at my code... all i did was replace the "mysite" and the "my pics" part.. so i don't know

mholtum

06-01-2005, 12:35 PM

check at the end of the code:


</center>
</Marquee>
</td>
</tr>
</table>
<br />

Loco Macheen

06-01-2005, 03:51 PM

yup, it has that.. it does scroll with IE,, just nothing with FF



<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="175">
<tr>
<td class="tcat"><span class="smallfont"><strong>$vba_options[portal_blockbullet] check these out !</strong></span>
</td>
</tr>
<tr>
<td class="$getbgrow" width="100%">

<SCRIPT src="fading.js"></SCRIPT>
<MARQUEE behavior= "scroll" align= "center" direction= "up" height="120" scrollamount= "2" scrolldelay= "15" onMouseOver="this.stop()" onMouseOut="this.start()">
<center>

**site links * as the formate of the first post

</center>
</Marquee>
</td>
</tr>
</table>
<br />

mholtum

06-01-2005, 03:58 PM

hmm, that is odd

Loco Macheen

06-02-2005, 04:46 AM

maybe its just my pc..lol its been acting up lately

LEAD_WEIGHT

06-02-2005, 01:23 PM

maybe its just my pc..lol its been acting up lately

No it is the <Marquee></Marquee> Tags that FireFox does not like, u need something from hotscripts or dynamic to get it to work in other broswers :)
or refresh your page or ctrl F5 & the link but it looks goofy in FireFox anyways.

mholtum

06-02-2005, 02:36 PM

then why does it scroll on my site in FF?

LEAD_WEIGHT

06-07-2005, 03:51 PM

Same thing just a little modification added for your little banner & link to page u have your affiliates or link it to Affiliates Hack.



<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="170">
<tr>
<td class="tcat"><span class="smallfont"><strong>$vba_options[portal_blockbullet] Affiliates</strong></span>
</td>
</tr>
<tr>
<td class="$getbgrow" width="100%">

<SCRIPT src="fading.js"></SCRIPT>
<MARQUEE behavior= "scroll" align= "center" direction= "up" height="170" scrollamount= "2" scrolldelay= "15" onMouseOver="this.stop()" onMouseOut="this.start()">
<center>


<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>


</center>
</Marquee>
</td>
</tr>
<tr>
<td class="$getbgrow" align="center">
<img src="http://www.theundergroundsource.com/forums/images/banner/foot_clan1.jpg" border="0">
<br><img src="http://www.yourdomain.com/forums/images/banner/foot_clan2.jpg" border="0">
</td>
</tr>
<tr>
<td class="tcat" align="center"><span class="smallfont"><strong><a href="http://www.yourthreadpost.com/forums/showthread.php?t=2">Click Here to become an Affiliate</a></strong></span>
</td>
</tr>
</table>
<br />

macgyver24

06-26-2005, 03:50 PM

mholtum

06-26-2005, 04:02 PM

Hello

I'm retarded or something I install these modules so far the weather went fine but not the advance search II and this module throw off the layout of my forum I have it set to the right. If you read this please help me.

Thank you
Which version of CMPS are you running?

If 2.0:

Add New Module
Template Based
Title - add name
Template to include - add name
Style - choose style to apply too
Template Content - Add code posted-change to effect you wish
Use Module Shell Template - No
Done.

macgyver24

06-26-2005, 06:22 PM

Thank you ......... problem solved but I had to move the modules around to keep the layout right.

If I can ask do you know why my portal doesn't match my forum their is 2 gaps or breaks one large one where it's missing the dark grey and a small break in the bottom of the footer where it's not dark grey. Also the footer very bottom images expand to far compared to the forum. Do you have an opinion why?

Thanks again.

mholtum

06-26-2005, 06:26 PM

Link?

macgyver24

06-27-2005, 12:49 AM

What a goof no link ... sorry here you go.

http://www.rideordieboyz.com/forum/ Portal
http://www.rideordieboyz.com/forum/forums.php Forum

mholtum

06-27-2005, 01:10 AM

If you are talking abou that little line, I have no idea. I noticed one of your members has some pics of Iraq. You should have him check out my gallery.. I have a ton of pics from my sons deployment! I like that stats - top 5 module! Nicely done. Where did you get it?

macgyver24

06-27-2005, 09:05 AM

vbhacks.us .... this is where 90% of my hacks or mods come from.

Here is the post: http://www.vbhackers.com/forum/thread504.html

LEAD_WEIGHT

06-30-2005, 03:16 AM

Link stealer & a spammer :eek:

macgyver24

06-30-2005, 01:31 PM

What are you talking about seriously!!!!

mholtum

06-30-2005, 01:34 PM

What are you talking about seriously!!!!
I was wondering the same thing.

LEAD_WEIGHT

07-01-2005, 03:38 AM

vbhacks.us .... this is where 90% of my hacks or mods http://www.vbhackers.com/forum/thread504.html

This site is so under used I feel like going back in time. So many of the post have not been touch since 2003 and that is most of the hacks.
Goto www.vbulletin.org at least u would not be in a morgue.

AndyA

07-22-2005, 11:41 AM

Works great for me, :D I suppose this could also be used to display photo's you'd need to create thumbnails of course.

mholtum

07-22-2005, 11:48 AM

Works great for me, :D I suppose this could also be used to display photo's you'd need to create thumbnails of course.
You can use it to display any images. If you put it in the middle you can use larger images.

AndyA

07-22-2005, 03:23 PM

I've also got this displaying image thumbnails but I'd like to make the module window deeper to display more images at once, is this possible ?

See here www.throttlejockey.co.uk

mholtum

07-22-2005, 03:47 PM

I've also got this displaying image thumbnails but I'd like to make the module window deeper to display more images at once, is this possible ?

See here www.throttlejockey.co.uk

Why yes it is! Change the red part

<SCRIPT src="fading.js"></SCRIPT>
<MARQUEE behavior= "scroll" align= "center" direction= "up" height="170" scrollamount= "2" scrolldelay= "15" onMouseOver="this.stop()" onMouseOut="this.start()">
<center>

AndyA

07-22-2005, 03:50 PM

Excellent, thanks a lot. :)

mholtum

07-22-2005, 04:03 PM

No Problem.

AndyA

07-25-2005, 12:32 PM

Hmmm this is strange ! The scrolling images look good with Firefox but it's just been pointed out to me that the images are washed out when viewed with IE, any ideas for a cure ?
Thanks
www.throttlejockey.co.uk

mholtum

07-25-2005, 12:39 PM

They are "washed out" on purpose. ;) that is the fading feature. When you point your mouse onto it they stop scrolling and become clear. For some reason this feature doesnt work correctly in firefox.

AndyA

07-25-2005, 12:46 PM

Got you, think is they don't become clear at all with IE ? :eek:

mholtum

07-25-2005, 12:51 PM

Post a link & check it out on my site. http://www.ravensrealm.net, left side.

Mind posting your template?

Did you upload the fading.js file into the root of your server?

AndyA

07-25-2005, 01:02 PM

I see it working fine on your site, here's my hashed template.

Title adv_portal_photo



<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="175">
<tr>
<td class="tcat"><span class="smallfont"><strong>$vba_options[portal_blockbullet] Photo's</strong></span>
</td>
</tr>
<tr>
<td class="$getbgrow" width="100%">

<SCRIPT src="fading.js"></SCRIPT>
<MARQUEE behavior= "scroll" align= "center" direction= "up" height="120" scrollamount= "2" scrolldelay= "15" onMouseOver="this.stop()" onMouseOut="this.start()">
<center>

<a href="http://www.throttlejockey.co.uk/image/i1%20(1).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(1).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(10).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(10).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(11).JPG" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(11).JPG" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(12).JPG" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(12).JPG" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(13).JPG" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(13).JPG" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(14).JPG" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(14).JPG" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(15).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(15).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(16).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(16).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(17).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(17).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(18).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(18).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(2).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(2).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(20).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(20).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(21).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(21).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(22).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(22).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(25).jpg" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(25).jpg" alt=""></a><BR><BR>
<a href="http://www.throttlejockey.co.uk/image/i1%20(26).JPG" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.throttlejockey.co.uk/image/thumb/tn_i1%20(26).JPG" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>
<a href="http://www.sitename.com" target="_blank"><img onmouseover=high(this) style="FILTER: alpha(opacity=30); moz-opacity: 0.3" onmouseout=low(this) border=0 src="http://www.path_to_image.jpg" alt=""></a><BR><BR>

</center>
</Marquee>
</td>
</tr>
</table>
<br />



Re fading.js I have it in my public_html folder but I've also just copied into what I 'think' is my root, the section above public_html. So fading.js is currently in both locations.

mholtum

07-25-2005, 01:06 PM

As long as it is in your public_html folder it should work correctly. You might try the full path here:

<SCRIPT src="http://www.yoursite.com/fading.js"></SCRIPT>

Not sure why it isnt working for you.. Your template seems fine.

AndyA

07-25-2005, 01:12 PM

Bingo !

You're a star, it works with the full url. :D

mholtum

07-25-2005, 01:52 PM

w00t! Glad to help

alyster4k

08-17-2005, 01:40 PM

Any idea how to adapt this scrolling/fading to the Upcoming Events block? :)

breed

11-04-2005, 04:12 PM

Cool addon mate .. Thanks very mutch for this .. i inctalled and all works fine.

In IE it scrolls and so on, just Firefox dont. I hope you or someone else fixx it soon in firefox, too .. since i really dont like IE .. hehe :D

Regards,
Breed

hammondfra

08-20-2006, 01:53 AM

I would like to bump this up, I have been working on some things trying to get this to work with FF. There are a few errors with the java script on line 0...so stated by FF

Error: Error in parsing value for property 'opacity'. Declaration dropped.
Source File: http://www.tibathon.net/forums/
Line: 0

I have tried re-working the js file, what I have read with how FF works, the tags for opacity can cause errors is below .9......I have tried to fix everything I can to make this work with FF...to no avail, the only way I could get this to work properly is to enlarge the height of the box to 170 so it won't scroll anymore in FF....

This mod is beautiful with how the fade works, and would love to see this work effectivly with all browsers.