Adding Class To Subpage Specific Images

Kirby 2 Solved ✅
1

Hello all.
I have a grid which shows every image of every project/subpage I have. I want a function which says that as soon as an image is clicked, that every other image has an opacity of 0.3, except every image of that specific project.
Its driving me a bit crazy for a while, because I can’t figuring out how to add classes to these images.

Would be super nice if someone could help me. Thank you very much in advance.

2

Just echo the project uid as class name?

3

Ah nice!

I added this to my element:
<?= $project->uid() ?>

and this function to my html:

<script>
	$('.item').click(function() {
		$("<?= $project->uid() ?>").addClass("itemSelector");
	});
</script>

I am sure its not as easy as easy like this ^. Because the function seems not to work.

4

Assuming. that the element with the item class also. has the project uid:

<script>
$(".item").on( "click", function() {
    var className = $(this).attr('class');
    var elements = $("." + className.replace(' ', '.'));
    elements.addClass("itemSelector");
});
</script>
5

Thanks for your answer. But its also not adding the class :open_mouth:

6

Is the script in the top of the html file or the bottom? Some scripts ned to be at the bottom because they look up the page to find the element. Also, is it inside a document ready?

7

Hey the script is at the bottom. But its definitely reading the script. The console.log is appearing

8

Please post your HTML structure, the code should actually work, provided that the HTML looks like I expected.

9

The block looks like this:

<main>
	<section class="grid">
		 <?php foreach($page->children() as $project): ?>
			<?php foreach($project->slideshow()->yaml() as $image): ?>
				<?php if($img = $project->image($image)): ?>

					<div class="item <?= $project->uid() ?> lazyload ">
						<a class="load no-barba" data-url="<?php echo $project->url() ?>"</a>
							<?php $width = 2000 ?><?php $quality = 60 ?>
							<img 	class="img lazyload"
									src="<?php echo $img->resize(1, 1, 5)->url() ?>"
									data-src="<?php echo $img->resize($width, null, $quality)->url() ?>"
									alt ="PeterLanger" />
						</a>
					</div>
					
				<?php endif ?>
			<?php endforeach ?>
		<?php endforeach?>
	</section>
</main>

<script>
$(".item").on( "click", function() {
    var className = $(this).attr('class');
    var elements = $("." + className.replace(' ', '.'));
    elements.addClass("itemSelector");
});
</script>
10

The reason why it didn’t work is because you have an additional classname on the element, so the string replacement doesn’t work. Solution that should now work, but only after removing the whitespace after the lazyload class:

<script>
$(".item").on( "click", function() {
    var className = $(this).attr('class');
    var elements = $("." + className.replace(/ /g,'.'));
    elements.addClass("itemSelector");
});
</script>
11

PERFECT! You saved my evening. Thank you for that solution.