Displaying dynamic project info in a separate <div> when hovering over project?

Kirby 2 Solved ✅
1

I would like to achieve the following with kirby: My site’s main content container is split up into two sections (using flexbox), one contains the thumbnails of all projects in the backend (this section takes up 75% of the site’s width), the other section, which is sitting on the righthand site of the projects container, should display the title + the description of the project which the user is hovering over. When hovering over no project at all it should remain empty. Here’s a quick mockup of the layout and the functionality I’m describing:

Kirby_Dynamic-ProjectInfo-Display_Mockup-01-1
Kirby_Dynamic-ProjectInfo-Display_Mockup-01-1.jpg1536×960 149 KB

Right now, I am only getting so far that I can display the project’s title and description right above the project’s thumbnail, in the same div, which obviously is quite simple:

<div class="project-wrapper flex-3">
		<div class="flex-grid-thirds">

			<?php foreach($projects as $project): ?>
		      
		      <div class="col project-entry">

				<div class="showcase-caption">
					<p class=""><?= $project->title()->html() ?></p>
					<p><?= $project->text()->kirbytext() ?></p>
				</div>

		        <?php 
		        $projectImages = $project->images();
		        foreach($projectImages as $projectImage):
		        ?>

				        <a href="<?= $projectImage->url() ?>" data-fancybox="gallery-<?= $projects->indexOf($project) ?>">

				          <?php if($projectImage == $projectImages->first()): ?>
				            <img src="<?= $projectImage->url() ?>" alt="Thumbnail" class="project-preview-img" />
				          <?php endif ?>

				        </a>    

		      	<?php endforeach ?>

		    	</div>

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

How can I let this information

<div class="showcase-caption">
     <p class=""><?= $project->title()->html() ?></p>
     <p><?= $project->text()->kirbytext() ?></p>
</div>

be displayed in another part of the site, dynamically for each project?

Appreciate any help with this. Thanks.

2

You can make an Ajax request that fetches the information from the server when the user hovers over the image or clicks on it and injects it into the div.

3

Ok, let me read up on Ajax requests, because I don’t know how they work. Thanks for the quick response!

4

Add the caption to each .project-entry and hide it with css in that scope. Then use javascript to make it visible in the page on .project-entry hover. This should give you some hints (untested jQuery code):

$(".projects-container").on("mouseover", ".project-entry", function () {
    $(".project-info-container").html($(this).find(".showcase-caption").html());
});

PS: I would see this as an excellent case for progressive enhancement: show the captions in each .project-entry when no js is available. When there is js available, hide them with css in the project-entry scope and use method as shown above.

2 Likes
5

Also useful on mobile devices, does not make much sense if the caption appears somewhere down the page.

1 Like
6

Nice, your suggestion works well already. The project title and description are both showing up in the div I intended for them. When showing the content of .showcase-caption using mouseover, I should be able to hide it again as well with mouseleave, right? How can I implement that in your script?

Thanks a million for your help :slight_smile:

7

Something like this:

$(".projects-container").on("mouseover", ".project-entry", function () {
    $(".project-info-container").html($(this).find(".showcase-caption").html());
}).on("mouseleave", ".project-entry", function() {
    $(".project-info-container"}.html("<div></div>);
});
1 Like
8

Hm not quite working yet. First I thought it was because a couple of brackets were mixed up, but it didn’t solve it. With this code, nothing is showing up at all when hovering:

$(".projects-container").on("mouseover", ".project-entry", function () {
    $(".project-info-container").html($(this).find(".showcase-caption").html());
}).on("mouseleave", ".project-entry", function() {
    $(".project-info-container").html("<div></div>");
});
9

Hmm, this should work: https://codepen.io/anon/pen/KvGOrg

1 Like
10

It does, I merely made a spelling mistake in one of my classes :confused: :smiley: Thanks again, great help!