KirbyText Image Slider

Here’s a way to generate an image slider with a very simple KirbyText tag. All the files and documentation on how to install and use it are in this gist:

6 Likes

Thanks a lot!, thats very helpfull for me :blush:

1 Like

Hi Nate,

Many thanks for this simple image slider solution!

I am a noob so having a hard time with the last step: “initiate the lory script”. Does the following code look correct to you? I have it inserted in my html head element.

   <?php echo js('assets/js/jquery.lory.min.js') ?>
    	<script>
        $(function(){

            $('.js_slider').lory({
             infinite: 1
            });
      
        });
        </script>

Hi @jliekim what you have looks correct, so I think the only thing that might be missing is that you need to also have jQuery for this plugin. Are you calling it in before this code?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

If that doesn’t help, message me directly and I’ll see if I can help. Good luck!

1 Like

Hi Nate,
i’m also a noob and need help with the Kirbytext Image slider.

I put slider.php into the folder “tags”, included the jquery.lory.min.js, the sliderstart and also jquery. But i have two questions: Where schould i put the name of the images? and how to include the slider into a site?

Sorry for that noob questions;)

Greetings
manu

It is a custom kirbytag, so you put the kirbytag somewhere in a textarea field. The images are grabbed by some common filename part, for example, if all images contain the part “slider”, you can put the tag (slider: slider) into you textarea field. Check out the examples in the readme of the plugin.

thank you for the fast answer!
Sure, I’ve read the readme! But i have still the same question…
so i have to put the “slider: image-” into the yml file?

No, into a textarea field in the Panel.

And then in your template for that page, you have to render that field using the Kirbytext method:

<?php echo $page->text()->kirbytext() ?>

Provided the field you defined in your blueprint (i.e. the .yml file) is called text.

1 Like

Thank you!
i got it!

Hi There,

another noob question I am afraid. I copied

  • slider.php to site/tags and
  • jquery.lory.min.js to assets/js/jquery.lory.min.js

I am not sure where the code needs to go. I tried to copy the following lines into my footer snippet with no success.

<footer class="footer cf" role="contentinfo">
      </footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>


<?php echo js('assets/js/jquery.lory.min.js') ?>
    	<script>
        $(function(){

            $('.js_slider').lory({
             infinite: 1
            });
      
        });
        </script>

</body>
</html>

I have tried to copy it directly into the relevant template which didn’t work for me either

 <?php snippet('header') ?>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <?php echo js('assets/js/jquery.lory.min.js') ?>
        	<script>
        $(function(){

            $('.js_slider').lory({
             infinite: 1
            });
      
        });
        </script> 

<main class="main" role="main">
    
    <article class="article single wrap">

      <header class="article-header">
        <h1><?= $page->title()->html() ?></h1>
      <div class="text">
          
        </div>
      
      </header>

    <div class="text">
        <?= $page->text()->kirbytext() ?>
<hr />
<?php snippet('prevnext', ['flip' => true]) ?>

      </div>
      
    </article>

  </main>

<?php snippet('footer') ?>

if anyone could help me with this noob-affair, I’d appreciate it a lot.

What exactly does not work as expected? When you inspect your source code, is there a list with images?

How do you add you list of images? Looks like the “whatever” option, for example, cannot work. The tag expects a name pattern each image starts with, so you cannot feed it a comma separated list of images, for example.

hey there.
Does this Slider also work on #kirby-3 ?
In my case it is not working – so I was wondering.

The syntax for registering custom KirbyTags and plugins in general has changed, so no, you would have to adapt the code.

Ah. I thought so.
thanks.

Any recomandations for a slider solution on Kirby3? :sweat_smile:
i am looking vor a very simple slider.

This has nothing to do with Kirby, such sliders work with any system. Here are some options:

2 Likes