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:
Thanks a lot!, thats very helpfull for me
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!
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
.
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?
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: