Multiple Image change on mouseover

Kirby 2 Solved ✅
1

Hi guys, i’m facing a problem with a hover effect i’d like to have

On mouseover i’d like to change various images for each project. The first image is displayed, but all projects have the last array of the first project as hover.

What might be wrong? Would be great if you could help a bit.
In this fiddle it works perfectly http://jsfiddle.net/matthias_h/zgnd9w90/1/

				<div class="image">
					<?php
					
					$i = 0;
					$datasrc = '';

					foreach($project->images()->shuffle()->limit(3) as $image) {
						if ($i == 0) {
							$datasrc .= $image->url();
						} else {
							$datasrc .= ',' . $image->url();
						}
						$i++;
					}
					?>
					<figure class="img--container" data-image-list="<?php echo $datasrc ?>">
						<img class="img--hover" src="<?php echo $project->images()->first()->url() ?>" alt="<?php echo $project->title()->html() ?>">
					</figure>

				</div>

and here is the jquery snippet

		$(document).ready(function(){
			$('img').mousemove(function (event) {
				
				var xPos = event.pageX;
				
				$images = $('figure').data("imageList");

				var array = $images.split(',');
				
				if (xPos > 100) {
					$(this).attr("src", array[0]);
				}
				if (xPos > 200) {
					$(this).attr("src", array[1]);
				}
				if (xPos > 300) {
					$(this).attr("src", array[2]);
				}

			});

		});
2

matches first element found in dom-tree. you need to do somthing like this (untested).

$images = $(this).parents('figure').eq(0).data('imageList');
4
  • why are you using on() to bind events instead of the shorthand versions the fiddle uses?
  • can you create a new fiddle based on the code you have now? i would need the dom-tree the js works on to do some testing.
  • maybe the mouseout function is required to make it work properly? but i don’t think so.
6

You are already doing that here?

<div class="img--container">
						<?php foreach($project->pictures()->yaml() as $image): ?>
							<img class="img--hover" src="<?php $img = $page->image($image); echo $img? $img->url() : '' ?>" alt="<?php echo $project->title()->html() ?>">
						<?php endforeach ?>
					</div>

So what does not work as expected?

It does not really matter if you are using Kirby or plain old HTML, as long as your markup is correct and your Javascript, it should work.

8

Hi, i’d like to use your plugin for a project overview with multiple galleries.

I used the snippet Texnixe posted above

<?php foreach($project->pictures()->yaml() as $image): ?>
     <img src="<?php echo $img = $page->image($image)? $img->url() : '' ?>" alt="<?php echo $page->title()->html() ?>" />
<?php endforeach ?>

but it seems not to work. I have it in a another foreach loop

<div class="container-entries row">
<?php 
$projects = page('projects')->children()->visible();
foreach ($projects as $project) : ?>

<div class="ctn-entry">
	<div class="entry">
		
		<a href="<?php echo $project->url() ?>">
			<h2 class="padding-bottom--2rem"><?php echo $project->title()->html() ?></h2>
			<div class="image">

				<div class="img--container">
					<?php foreach($project->pictures()->yaml() as $image): ?>
						<img src="<?php echo $img = $page->image($image)? $img->url() : '' ?>" alt="<?php echo $page->title()->html() ?>" />
					<?php endforeach ?>
				</div>

			</div>
		</a>
	</div>
</div>
<?php endforeach ?>

</div>

I think the problem is that i need in this line “project” instead of “page”
<img src="<?php echo $img = $page->image($image)? $img->url() : '' ?>" alt="<?php echo $page->title()->html() ?>

but i get an error when i put “project”

What might be wrong?

9

What sort of error do you get?

10

Right in that moment it works!

I played a bit around and found out that this snippet is the solution

				<div class="img--container">
					<?php foreach($project->pictures()->yaml() as $image): ?>
						<img src="<?php echo $project->image($image)->url()?>" alt="<?php echo $project->title()->html() ?>" />
					<?php endforeach ?>
				</div>
11

I found a jquery plugin for the effect to work. ->https://github.com/sladex/images-rotation

The only thing i’m struggling now is to create a comma seperated list for the images

				<div class="img--container images-rotation">
					<?php
					$i = 0;
					$dataimages = '';
					foreach($project->pictures()->yaml() as $image): {
						if ($i == 0) {
							$dataimages .= $image->url();
						} else {
							$dataimages .= ',' . $image->url();
						}
						$i++;
					}
					?>
					<img src="<?php echo $project->image()->first()->url()?>" alt="<?php echo $project->title()->html() ?>" data-images="<?php echo $dataimages ?>"/>
				</div>

The code fires the default php error page. What might be wrong?

12

I bet your error message is something like "trying to call method on a non-object, because your $image variable is just a string, not an image object. Therefore, you can’t call the url() method on it, see your snippet above for the correct way of fetching the image.

Have a look at the PHP implode() method for an easier way of getting a comma separated list from an array.

1 Like
13

To be honest, i don’t have an approach, how to start to code that.

I tried a first step with

					<?php
					$arr = array('');
					foreach($project->pictures()->yaml() as $arr): {
					}
					?>
					<img src="" alt="<?php echo $project->title()->html() ?>" data-images="<?php echo implode("",$arr) ?>"/>

but it fires again - of course - errors. Maybe you can help me?

14

There are a few issues with your code, I won’t go intro this now.

<?php
$images = $project->pictures()->yaml();
if(!empty($images)): ?>
<img src="" alt="<?php echo $project->title()->html() ?>" data-images="<?php echo implode(',', $images) ?>">
<?php endif ?>

Doesn’t the image need a src attribute in case the javascript fails?

1 Like
15

First of all, thank you so much. But, heyhey, i’m struggling now with the result.

To make the plugin work, i need every single file in Quotation Marks.

data-images='["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]'>

The code i have now gives back

data-images="image-03.jpg, image-01.jpg, image-07.jpg, image-08.jpg

And you are right. For src="" i need the first image from the yaml

sorry, for the struggle :frowning: but the topic is still a “question”

16

3 hours later - this solves my first problem (files in quotation marks).

Now i just need to find out how to get the filepath from the data-images. By now, only the filnenames are displayed. Anyone who might have an idea?

				<div class="image">
					<?php
					$images = $project->pictures()->yaml();
					if(!empty($images)): ?>
					<div class="img--container images-rotation" data-images='[<?php echo '"'.implode('","', $images).'"'; ?>]'>
						<img src="<?php echo $project->image()->url()?>" alt="<?php echo $project->title()->html() ?>">
					<?php endif ?>
				</div>
			</div>
17

What exactly do you need, the absolute path? The URL? Anyway:

<?php
$p = $page;
$function = function($n) use($p){
    return '"' . $p->image($n)->url() . '"';
};
$images = $page->pictures()->yaml();
$images  = array_map($function, $images);

?>
<img src="<?= $page->image()->url() ?>" alt="<?php echo $page->title()->html() ?>" data-images='[<?php echo implode(',', $images) ?>]'>
1 Like
18

Ah sorry for my language. I meant, i need the URLs for the data-images.

19

I changed the code above to use the URL instead.

If you are not sure about what the code does, check out the array_map docs and do some var_dump()-ing to see what is happening…

1 Like
20

Thank you a lot, Sonja. Yes at first sight, i don’t really have a clue what you did, but i’ll try to understand

21

Ah, what would i’ve done without your help. Just one problem is left.

the src is not the first image from the yaml array.
I tried it with the reset function, but the quotation marks seem to be wrong. Any idea how to solve that?

				<?php
				
				$p = $project;

				$function = function($n) use($p){
					return '"' . $p->image($n)->url() . '"';
				};

				$images = $project->pictures()->yaml();
				$images  = array_map($function, $images);

				$first = reset($images);

				?>
				
				<div class="image images-rotation"  data-images='[<?php echo implode(', ', $images) ?>]'>
					<img src="<?php echo $first ?>" alt="<?php echo $project->title()->html() ?>">
				</div>
22

Like this:

Note that I changed the variable for the image URLs.

<?php
$p = $page;
$function = function($n) use($p){
    return '"' . $page->image($n)->dir() . '"';
};
$images = $page->pictures()->yaml();
$imageURLs  = array_map($function, $images);
$firstimage = $page->image($images[0]);

?>
<img src="<?= $firstimage? $firstimage->url(): '' ?>" alt="<?php echo $page->title()->html() ?>" data-images='[<?php echo implode(',', $imageURLs) ?>]'>
1 Like
23

Now everything works fine!
To sum it up for other kirby users (this topic is full of obsolete content:) )

For the hover effect you need this plugin ->https://github.com/sladex/images-rotation

For your template you’ll need this code:

				<?php
				$p = $project;
				$function = function($n) use($p){
					return '"' . $p->image($n)->url() . '"';
				};
				$images = $project->pictures()->yaml();
				$imageURLs = array_map($function, $images);


				$firstimage = $project->image($images[0]);

				?>
				<div class="image images-rotation" data-images='[<?php echo implode(',', $imageURLs) ?>]'>
					<img src="<?= $firstimage? $firstimage->url(): '' ?>" alt="<?php echo $project->title()->html() ?>">
				</div>

Thank you so much, Sonja!