Only one picture needet - not all ... / Nur ein Bild beim Anklicken anzeigen - Support

Tagged: Bild

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
July 29, 2021 at 6:21 pm #1313306
4dino
Participant
Hello to all

I have searched and searched – but found nothing.

Problem:
I have a web page with several images and buttons. When I click on a picture a larger window opens
and all pictures of this page are shown.

Target:
Only 1 or 2 specific images should be shown per image or button.

Question: what am I doing wrong? What is the solution?

Example my page:
Per product 1 image and 1 button.
When clicking on an image or button,a larger picture opens and only images for this product should appear – not other images on the same page (click trought)..

Thanks for your help!

—————————————————-

Hallo an Alle

Ich habe gesucht und gesucht – aber nichts gefunden.

Problem:
Ich habe eine Internetseite mit mehreren Bildern und Buttons. Wenn ich ein Bild anklicke öffnet sich ein Fenster
und alle Bilder dieser Seite werden gezeigt.

Ziel:
Pro Bild oder Button soll nur 1 bis 2 bestimmte Bilder angezeigt werden.

Frage: was mache ich falsch? Wie ist die Lösung?

Beispiel meine Seite:
Pro Produkt 1 Bild und 1 Button.
Bei Klick auf Bild oder Button sollen nur Bilder für dieses eine Produkt erscheinen – nicht andere Bilder
auf derselben Seite.

Vielen Dank für Eure Hilfe!
- This topic was modified 3 years, 4 months ago by 4dino. Reason: English translation fellowed by German language
August 3, 2021 at 8:27 am #1314085
Ismael
Moderator
Hey 4dino,

Thank you for the inquiry.

We could prevent the lightbox script from grouping all lightbox links inside the #main container but you have to modify all buttons and add a custom css class to them. In the buttons’ Advanced > Developer Settings > Custom CSS Class, place the name “non-grouped-lightbox”. Then add this code or script in the functions.php file.
```
function ava_open_image_in_popup_group() {
	?>
	<script type="text/javascript">
	(function($){
		$(document).ready( function(){
			$('.non-grouped-lightbox a').magnificPopup({
			  type: 'image',
			  mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
			  closeBtnInside: true,
			  closeOnContentClick:false,
			  midClick: true,
			  gallery: { enabled:false }
			});
		});	
	})(jQuery);
	</script>
	<?php
}
add_action('wp_footer', 'ava_open_image_in_popup_group', 9999);
```
All items with the class name “non-grouped-lightbox” will not be included in the gallery.

Best regards,
Ismael
August 3, 2021 at 4:44 pm #1314198

4dino
Participant

Dear Isamael

Thank you very much for your help!
Unfortunately, it’s too complicated for me.

I am a real WordPress dummy…

I have found a good solution and this works also
fine with the buttons on my site, bud…

Solution in “functions.php”:

<?php

function popup_no_gallery() {
if( is_page(113) ) {
?>
<script type=”text/javascript”>
(function($){
$(window).load(function(){
$(‘a.lightbox-added’).magnificPopup({
type: ‘image’,
mainClass: ‘avia-popup mfp-zoom-in mfp-image-loaded anchor-link’,
preloader: true,
midClick: true,

gallery: {
enabled: false
},
});
});
})(jQuery);
</script>
<?php
}
}
add_action(‘wp_footer’, ‘popup_no_gallery’);

Bud my problem is that I have about 20 pages to add.
And I don’t know how and where I have to ad the pages
in this script.

Actually, it’s valid for page 133, but I need also for page 588
and others.

Do you have a solution?

Thank you for your help
Martin

August 3, 2021 at 7:02 pm #1314216

4dino
Participant

Dear Ismael

I got help and made the changes you describet.

Unfortunately i see the code now on every page, ond the top
of every page in a red frame… – and the problem with the pictures is not solved.

What error i made?

Best, Martin

August 6, 2021 at 10:14 am #1314793

Ismael
Moderator

Hi,

Thank you for following up.

Did you add the code in the functions.php file? Please post the login details in the private field so that we could test the script properly. Make sure that the Appearance > Editor panel is accessible.

Best regards,
Ismael

August 23, 2021 at 11:38 pm #1318048

4dino
Participant

This reply has been marked as private.

August 25, 2021 at 6:46 am #1318225
Ismael
Moderator
Hi,

Thank you for following up.

In the script that you are using, look for the is_page function.
```
if( is_page(113) ) {
```
You can replace the current value with an array of page ID.

Example:
```
if( is_page(array(113, 588, 123)) ) {
```
This should disable the gallery option for the lightbox within the pages with the ID 113, 588 and 123.

Best regards,
Ismael
August 25, 2021 at 6:32 pm #1318329

4dino
Participant

Dear Ismael

Again: thank you for your help.

Now it works perfectly!

I really appreciate your help!
Martin

August 25, 2021 at 9:35 pm #1318345
Guenni007
Participant
or the other way round:
You decide by giving same class to the images which belongs to each other.
Class: group-1 will open together – etc.
```
// group images for lightbox galleries (group-1, group-2 etc)
function handle_lightbox_groups_in_gallery(){
if(is_page(123456)){
?>
<script>
(function($){
    $(window).on('load',function() {
        $('.group-1 .lightbox-added').attr('data-group', '1');
        $('.group-2 .lightbox-added').attr('data-group', '2');
        $('.group-3 .lightbox-added').attr('data-group', '3');
        $('.group-4 .lightbox-added').attr('data-group', '4');
        $('.group-5 .lightbox-added').attr('data-group', '5');
        $('.group-6 .lightbox-added').attr('data-group', '6');
        $('.group-7 .lightbox-added').attr('data-group', '7');
        $('.group-8 .lightbox-added').attr('data-group', '8');

        var groups = {};
        $('.lightbox-added').each(function() {
          var id = parseInt($(this).attr('data-group'), 10);
          if(!groups[id]) {
            groups[id] = [];
          }
          groups[id].push( this );
        });

        $.each(groups, function() {
          $(this).magnificPopup({
              type: 'image',
              mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
              closeOnContentClick: false,
              closeBtnInside: false,
              gallery: { enabled:true }
          })
        });
    });
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'handle_lightbox_groups_in_gallery');
```
August 27, 2021 at 4:50 pm #1318690

Yigit
Keymaster

Hi,

@4dino Glad Ismael could help! Let us know if you have any other questions and enjoy the rest of your day! :)

@Guenni007 thanks for your help as always!

Best regards,
Yigit
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Only one picture needet – not all … / Nur ein Bild beim Anklicken anzeigen