Multiple Image change on mouseover

Helge · February 3, 2017, 2:28pm

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]);
				}

			});

		});

bnomei · February 3, 2017, 2:40pm

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

$images = $(this).parents('figure').eq(0).data('imageList');

bnomei · February 4, 2017, 5:10pm

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.

texnixe · February 28, 2017, 8:33am

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.

Helge · March 17, 2017, 11:32am

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?

texnixe · March 17, 2017, 11:35am

What sort of error do you get?

Helge · March 17, 2017, 11:39am

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>

Helge · March 19, 2017, 4:11pm

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?

texnixe · March 19, 2017, 4:53pm

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.

Helge · March 19, 2017, 5:55pm

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?

texnixe · March 19, 2017, 10:02pm

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?

Helge · March 20, 2017, 11:04am

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 but the topic is still a “question”

Helge · March 20, 2017, 2:33pm

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>

texnixe · March 20, 2017, 2:48pm

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) ?>]'>

Helge · March 20, 2017, 2:54pm

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

texnixe · March 20, 2017, 2:55pm

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…

Helge · March 20, 2017, 3:32pm

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

Helge · March 20, 2017, 4:28pm

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>

texnixe · March 20, 2017, 4:52pm

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) ?>]'>

Helge · March 20, 2017, 5:36pm

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!

Topic		Replies	Views
Multiple Image Change on Click Solved ✅	15	5130	December 12, 2023
Multiple images on hover Solved ✅	6	1449	August 7, 2020
Modifying hover color Solved ✅	8	376	March 23, 2019
Dynamic background color change on hover Solved ✅	7	1580	May 17, 2022
Changing the showcase-snippet to display multiple images Solved ✅	3	721	August 2, 2017

Multiple Image change on mouseover

Related Topics