Multiple image slideshows on one page

So the slider works if you have only one slider, right? Could you disable the JavaScript for the slider and check if the images all get rendered as expected (when using multiple galleries)? I suspect this is a JavaScript issue and not Kirby related.

If all images get rendered as expected, could you post your JavaScript code, pls.

Here’s the slider code:

 <script>
 $(function () {
      $("#slider").responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
        speed: 500,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });

    });
  </script>

After disabling it, I still don’t see images from gallery1.

I have forgotten to add, that the field “gallery” in blueprint I got from this extension : https://github.com/TimOetting/kirby-gallery

Looks like this in panel:

Maybe there’s an error in the array I’m trying to use? But it doesn’t break the website, just not showing images

I can’t see any errors in your code and I tested this with a starterkit and all images get rendered as expected.

Ok, could you then also post the content of the content file of that page?

thanks for checking

this page won’t have any other content but several sliders.

I wanted to be able to add images to different galleries through panel, so I added gallery extension and had couple galleries in the blueprint file.

I tries to add one slider first and only first gallery from the blueprint too, but it doesn’t seem to work.
I just can’t figure out what I’m doing wrong here

As I said, there is nothing wrong with the code as such. But if you have added the galleries via the panel, there should be a content file ‘home.txt’ (or whatever your content file is called), which now contains the lists of images. I would like to see that.

oh, yeah.
now I see the problem, although I added gallery fields to blueprint and added images through panel, my ‘home.txt’ still looks like this.

Title: Home

----

Pictures: 

- 00d0d_1j0i7la1r5c_600x450.jpg
- 00d0d_cty0u45v3qk_600x450.jpg
- 00e0e_lupkdhgbfp2_600x450-1.jpg
- 00e0e_lupkdhgbfp2_600x450.jpg

could it be because I’m working locally using MAMP?
or maybe https://github.com/TimOetting/kirby-gallery extension wasn’t added properly?

Your content file should look like this:

Title: Some title
----

Gallery1: 

- image1.jpg
- image2.jpg
- image3.jpg

----

Gallery2: 

- image4.jpg
- image5.jpg
- image6.jpg

----

If it doesn’t, then you either did not save the page after adding the galleries or there is something wrong with your blueprint.

thanks for helping to figure it out.
I saved a new blueprint and now it looks the way it should be

Glad that it works now :slight_smile:.

Hi @texnixe,

Thanks for your help.

I’m facing difficulties again with making my code work again.
I want to have thumbnails of each slideshow image to be generated on another page simultaneously.
I hope it makes sense.
I don’t really understand how to do it. I came up with an idea, but it doesn’t seem to work.
If you could help me putting it together, I’d really appreciate this. Thank you.

Code:

<ul class="thumbnails">
<?php $slides= page('home')->gallery1()->thumb($image, array('width' => 250, 'height' => 250))->niceSize(); ?>
<?php foreach ($image as $thumbnail):?>
	<li class="thumbnail"><img src="<?= $thumbnail->img()->toFile()->url() ?>" alt="<?= $thumbnail->alt()->html()?>" /></li>
<?php endforeach ?>
</ul>

@Thiousi Could you please look into my code?

That would be something like this:

<ul class="thumbnails">
  <?php 
  $p = page('home');
  $slides= $p->gallery1()->yaml();
  
  foreach($slides as $slide):
    $image = $p->image($slide); 
    if($image): ?>
  	<li class="thumbnail"><img src="<?= $image->resize(250)->url() ?>" alt="<?= $image->alt()->html()?>" /></li>
    <?php endif ?>
  <?php endforeach ?>
</ul>

Texnixe was too fast for me to help you out :wink: You’re in good hands and I’m looking forward to seeing the result of your hard work!

thanks for your quick reply.
I tried this code and I got a breaking errors in my site

Can you share the error with us ?

Error message:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Hm, that should not be related to the code above, if it was a PHP error, you should not get an error 500. But I replaced the braces with a colon in the foreach line, could you try again.

great, thanks.
page is working again.
I don’t see images though.

Oops, sorry, I overlooked the $thumbnail variable in the alt attribute, should be changed to $image. It’s strange though that you did not get an error message. Have you turned on debugging?

thank you so much for your help.
I have also added anchor tag to make thumbnails lead to specific slider.

You are welcome.

If you turn on debugging in your config.php like this,

c::set('debug', true);

you would get an error message if your variables are not defined like in this line in your code above:

<li class="thumbnail"><img src="<?= $thumbnail->img()->toFile()->url() ?>" alt="<?= $thumbnail->alt()->html()?>" /></li>

Here, you use the $thumbnail variable in two places but it seems it is not defined anywhere.