The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Scrolling Banner Pictures

View previous topic View next topic Go down

Solved Scrolling Banner Pictures

Post by kevinp on October 12th 2014, 3:48 pm

Hello
Is it possible to have scrolling banner pictures on the home page of the forum?
Thanks in advance
Kevin

http://shadowracingrsa.africamotion.net/


Last edited by kevinp on October 15th 2014, 2:07 pm; edited 1 time in total

kevinp
Forumember

Male Posts : 68
Reputation : 2
Language : English
Location : South Africa

http://shadowracingrsa.africamotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by _Twisted_Mods_ on October 12th 2014, 4:33 pm

Admin Panel>display>templates>general>overall_header

replace

Code:
<!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->

with

Code:
<!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><marquee behavior="scroll" direction="left"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></marquee></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <marquee behavior="scroll" direction="left"><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></marquee>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                                         
                  <td><a href="{U_INDEX}"><marquee behavior="scroll" direction="left"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></marquee></td>
                  <!-- END switch_logo_right -->


Save

Then Publish

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by kevinp on October 12th 2014, 5:11 pm

Can't see it anywhere there.

kevinp
Forumember

Male Posts : 68
Reputation : 2
Language : English
Location : South Africa

http://shadowracingrsa.africamotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by _Twisted_Mods_ on October 12th 2014, 7:13 pm

what version is your forum?

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by kevinp on October 12th 2014, 10:17 pm

It says php BB.
That's all I can see

kevinp
Forumember

Male Posts : 68
Reputation : 2
Language : English
Location : South Africa

http://shadowracingrsa.africamotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by _Twisted_Mods_ on October 12th 2014, 10:40 pm

under Admin Panel>display>skins>choose a theme

click the version tab it will tell you there

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by _Twisted_Mods_ on October 12th 2014, 11:19 pm

if you have phpbb3

same location as other one just different code

replace

Code:
<div id="logo-desc">

            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
         
</div>




with




Code:
<div id="logo-desc">
 <marquee behavior="scroll" direction="left">
            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
         
</marquee>
</div>

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by kevinp on October 13th 2014, 4:58 pm

Put the code in but nothing happens

kevinp
Forumember

Male Posts : 68
Reputation : 2
Language : English
Location : South Africa

http://shadowracingrsa.africamotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by Mati on October 13th 2014, 5:34 pm

Hello, kevinp

You want this image to scroll


Mati
Active Poster

Posts : 1883
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by kevinp on October 13th 2014, 5:39 pm

Yes please, with a few more pictures. (Sort of slide show.)

kevinp
Forumember

Male Posts : 68
Reputation : 2
Language : English
Location : South Africa

http://shadowracingrsa.africamotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by Mati on October 13th 2014, 5:57 pm


Mati
Active Poster

Posts : 1883
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by kevinp on October 13th 2014, 6:05 pm

That is exactly what I'm looking for. Only problem is, I'm a noob at this and have no clue. Thought I just put in some code and add pictures.
Thanks anyway for your trouble.
Kevin

kevinp
Forumember

Male Posts : 68
Reputation : 2
Language : English
Location : South Africa

http://shadowracingrsa.africamotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by Mati on October 14th 2014, 8:48 pm

Hi,

Go to AC-P -> Modules -> HTML & JAVASCRIPT >> Javascript codes management -> Create a new javascript

Title: whatever you want
Placement: In all the pages
Add the Javascript Code: And Submit

Code:
$(function(){$(".headerbar #logo").prepend('<div id="slider">
    <div><img src="http://amazingslider.com/wp-content/uploads/amazingslider/21/images/2013.jpg"/></div>
    <div><img src="http://amazingslider.com/wp-content/uploads/amazingslider/21/images/mobile.jpg"/></div>
    <div><img src="http://amazingslider.com/wp-content/uploads/amazingslider/21/images/skins.jpg"/></div>
    <div><img src="http://amazingslider.com/wp-content/uploads/amazingslider/21/images/2013.jpg"/></div>
</div> ');
                });

jQuery(function($) {
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
        .next('div').fadeIn(1000)
        .end().appendTo('#slider');}, 7000);
});

You can add as many banners you want.

Mati
Active Poster

Posts : 1883
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by kevinp on October 15th 2014, 11:56 am

Thank you so much for your help Mati.
I haven't used it yet because I need to ask where I put the pictures in?
I don't want to make a mistake.
Great stuff my friend.

kevinp
Forumember

Male Posts : 68
Reputation : 2
Language : English
Location : South Africa

http://shadowracingrsa.africamotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by Luffy on October 15th 2014, 12:11 pm

Hello,

I am posting the same code but with descriptions.
Replace the code Mati gave you with this one:
Code:
$(function(){$(".headerbar #logo").prepend('<div id="slider">
    <div><img src="IMAGE_URL1"/></div>
    <div><img src="IMAGE_URL2"/></div>
    <div><img src="IMAGE_URL3"/></div>
    <div><img src="IMAGE_URL4"/></div>
</div> ');
                });

jQuery(function($) {
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
        .next('div').fadeIn(1000)
        .end().appendTo('#slider');}, 7000);
});

After you paste this replace the IMAGE_URL1, IMAGE_URL2, IMAGE_URL3 and IMAGE_URL4 with the image url you want to have with the same order you want them to be visible. If you want to add more images, then simply add below <div><img src="IMAGE_URL4"/></div> the same code and paste the fifth image you want etc.
Then sumbit the code but first make sure you have the javascript enable to yes:
Admin Panel > Modules > Javascript codes Management > Enable Javascript code management : YES.

And you should be done!


MrMind






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by kevinp on October 15th 2014, 1:40 pm

OK, the pictures are changing, but we now have 2 banner pictures one below the other for some reason. The top picture is in the right place and changes, however, there is another picture underneath which I can't get rid of.

EDIT: It works great now. I had to delete the original banner picture and leave it blank.

A BIG THANK YOU GUYS FOR YOUR HELP.

kevinp
Forumember

Male Posts : 68
Reputation : 2
Language : English
Location : South Africa

http://shadowracingrsa.africamotion.net/

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by Luffy on October 15th 2014, 2:30 pm

Any time! Smile






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Scrolling Banner Pictures

Post by Ange Tuteur on October 15th 2014, 3:11 pm

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum