Creating a Slideshow on the Main Page

NoobCoder · April 2017

I'm editing the footer of the default_master.tpl for my custom theme and I want to add this...

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr

This creates a really nice custom slide show.

I can't get the code to work though, any help please? 8|

Is it even possible to have javascript code direct in the .tpl like that?

whu606 · April 2017

You can add js inside the following tags:

{literal} code goes here {/literal}

NoobCoder · April 2017

I did try that method, maybe I have made another mistake I can't find then

NoobCoder · April 2017

Yes I try this ^ method but still not work, I will tell you exactly what I did, I copy this code here into the footer area in a good place of default master tpl....

 <!DOCTYPE html>
<html>
<head>
    {asset name="Head"}
</head>
<body id="{$BodyID}" class="{$BodyClass}">
<div id="Frame">
    <div class="Top">
        <div class="Row">
            <div class="TopMenu">
                {home_link}
                <!--
                You can add more of your top-level navigation links like this:

                <a href="#">Store</a>
                <a href="#">Blog</a>
                <a href="#">Contact Us</a>
                -->
            </div>
        </div>
    </div>
    <div class="Banner">
        <div class="Row">
            <strong class="SiteTitle"><a href="{link path="/"}">{logo}</a></strong>
            <!--
            We've placed this optional advertising space below. Just comment out the line and replace "Advertising Space" with your 728x90 ad banner.
            -->
            <!-- <div class="AdSpace">Advertising Space</div> -->
        </div>
    </div>
    <div id="Head">
        <div class="Row">
            <div class="SiteSearch">{searchbox}</div>
            <ul class="SiteMenu">
                {dashboard_link}
                {discussions_link}
                {activity_link}
                {inbox_link}
                {custom_menu}
                {profile_link}
                {signinout_link}
            </ul>
        </div>
    </div>
    <div class="BreadcrumbsWrapper">
        <div class="Row">
            {breadcrumbs}
        </div>
    </div>
    <div id="Body">
        <div class="Row">
            <div class="Column PanelColumn" id="Panel">
                {module name="MeModule"}
                {asset name="Panel"}
            </div>
            <div class="Column ContentColumn" id="Content">{asset name="Content"}</div>
        </div>
    </div>



<center>ZONE1</center>
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">Automatic Slideshow</h2>

<div class="w3-content w3-section" style="max-width:500px">
  <img class="mySlides" src="img_la.jpg" style="width:100%">
  <img class="mySlides" src="img_ny.jpg" style="width:100%">
  <img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
{literal}
<script>

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}

</script>{/literal}



    <div id="Foot">
        <div class="Row">

            {asset name="Foot"}
        </div>
    </div>
</div>
{event name="AfterBody"}
</body>
</html>

R_J · April 2017

I've edited your comment to make the code readable.

I would say it looks okay. Can you see that script when you open the html source of your forum?

NoobCoder · April 2017

Thank you, No my friend I am getting "something has gone wrong" error from Vanilla code.

R_J · April 2017

Sorry, I only inspected the JavaScript. Above that you have a second <body>tag, which is rubbish and must be deleted.

I'm no JavaScript hero but I think you must first declare a function before you use it so I would put

var myIndex = 0;
carousel();

below the function definition.

vrijvlinder · April 2017

Why not simply use the plugin VSlider ?

Or the plugin Marquee ?

NoobCoder · April 2017

Please link I did not know there was a plug in

vrijvlinder · April 2017

Go to the addon section and use the search bar to find useful plugins... for example if you want a slider, input slider in the search bar and all plugins that have anything to do with a slider will show up...

https://open.vanillaforums.com/addon/vslider-plugin

NoobCoder · April 2017

Thank you!

NoobCoder · April 2017

I'm at a dead end now - tried both plugins neither seem to work! V-slider does not appear in my plugin list if i put it in root (as it states) nor does it if i put it in plugin?

Marquee appears and displays a message banner but I cannot add any pictures? Please help!

I will show you my site https://buyvillaspain.com/ I have installed both plugins

vrijvlinder · April 2017

No, you only put the vslider.html in the root and the folder vslider that contains the images.

You install the plugin as normal after you put the vslider.html and the images folder which you will call vslider and add it to the root of the forum.

Marquee appears and displays a message banner but I cannot add any pictures? Please help!

You need to add the image url manually in the dashboard. You need to check whether you want to display images or text only in the settings page.

NoobCoder · April 2017

OK, I put the vslider.html in root
Installed the plugin to plugin folder,
enabled the plug-in
created vlsider/images/ at root
added image.jpg
Edited vslider.html to add image.jpg

Still see no image?

Also with Marquee it works but only 1 image can be displayed, I cannot seem to add any more for some reason it doesn't work.

Thank you for trying to help me. Its progressed slightly

vrijvlinder · April 2017

Ok , please give me a link to where I can see the slider.

vrijvlinder · April 2017

To add a bunch of images to the marquee, just enter the html image links in the textbox like bellow. Make sure the images are the right size or it will look bad.

<img src="http://yourimage/piramyds2.jpg" width="250" height="auto"/>

NoobCoder · April 2017

That worked on marquee but the added images appaear below each other DOH! haha. I wanted them to appear sequentially one after the other like a smooth slider

""Ok , please give me a link to where I can see the slider.""

Ive installed and enabled it but no images appear. I tried editing the html file and adding my images but nothing is visible. Not sure how to proceed?

vrijvlinder · April 2017

It is possible your theme is to blame.. As to the marquee you need to add them next to each other and not in a separate line .

Creating a Slideshow on the Main Page

Comments