Blog Documentation Book a Demo
Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Creating a Slideshow on the Main Page

NoobCoderNoobCoder New
edited April 2017 in Vanilla 2.0 - 2.8

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?

Tagged:

Comments

  • whu606whu606 MVP

    You can add js inside the following tags:

    {literal} code goes here {/literal}

  • NoobCoderNoobCoder New

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

  • NoobCoderNoobCoder New
    edited 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_JR_J Admin

    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?

  • NoobCoderNoobCoder New
    edited April 2017

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

  • R_JR_J Admin

    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.

  • vrijvlindervrijvlinder MVP

    Why not simply use the plugin VSlider ?

    Or the plugin Marquee ?

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • NoobCoderNoobCoder New

    Please link I did not know there was a plug in :/

  • vrijvlindervrijvlinder MVP

    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

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • NoobCoderNoobCoder New

    Thank you! :D

  • NoobCoderNoobCoder New
    edited 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 :p

  • vrijvlindervrijvlinder MVP
    edited 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.

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • NoobCoderNoobCoder New

    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 :p

  • vrijvlindervrijvlinder MVP

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

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • vrijvlindervrijvlinder MVP

    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"/>

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • NoobCoderNoobCoder New

    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?

  • vrijvlindervrijvlinder MVP
    edited 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 .

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

Sign In or Register to comment.