[Resolved] Gallery with repeating fields (pure css)

[Author]

Posts

[olivierF]

Hello,

I am looking to make a photo gallery with lightbox for a client.
You can see the beginning here. hidden link
I have created a repeating field (image) and in a 'foreach' loop.
I have to create a buttonn 'next' and 'prev' to navigate from one image to another but I don't know how to handle that. Can you help me on this. Thank you.
There is de code of de 'foreach' loop:

[wpv-for-each field="wpcf-photo-event"]
	<div class="column">
		<a class="lightbox" href="#[types field='photo-event' output='raw' [/types]">
		[types field='photo-event' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail'][/types]
		</a>
	</div>
	<div class="lightbox-target" id="[types field='photo-event' output='raw'][/types]">
   		[types field='photo-event' title='%%TITLE%%' alt='%%ALT%%' size='large'][/types]
  		<a class="lightbox-close" href="#"></a>
  		<a class="previous" href="#[types field='photo-event' output='raw' [/types]"><</a>
		<a class="next" href="#[types field='photo-event' output='raw' [/types]">></a> 
	</div>
[/wpv-for-each]

[Shane]

Hi Olivier,

Thank you for contacting our support forum.

Have you tried using our Toolset blocks plugin along with the Gutenburg editor?

Take a look here at an example
hidden link
Where you can click the different gallery images and they open in a lightbox.

This entire page was built using toolset blocks and gutenburg.

Please let me know if you want to try something like this.

Thanks,
Shane

[olivierF]

Hi shane,
Thank you for your answer.
Is it possible to use toolset blocks in a custom post type?
Thanks a lot for your help.

[Shane]

HI Olivier,

Yes it is is possible to do.

In the example it was being used on a custom post type.

Thanks,
Shane

[olivierF]

Thanks Shane,
you speak of gutenberg but I can not use it with my theme, does it work without it ?
And with repeated fields inside custom post type ?

[Shane]

Hi Olivier,

Unfortunately not 🙁

The toolset blocks plugin provides additional features to the gutenburg editor.

So your theme would need to be compatible with the gutenburg editor. Yes it create a gallery with the repeatable fields. See Screenshot

Thanks,
Shane

[olivierF]

The customer does not want to use gutenberg, so I can not use it, is there another track? I have the impression that it does not miss much to my code so that it works, just a button next and prev, the rest works already well.
Thank you

[Shane]

Hi Olivier,

The main issue I see here is that your code here

 <a class="previous" href="#[types field='photo-event' output='raw' [/types]"><</a>
        <a class="next" href="#[types field='photo-event' output='raw' [/types]">></a> 
    </div>

Is getting the URL for the same exact instance of the current photo being displayed. You will need to get the urls for the next and previous post.

Is it a plugin that you are using for the lightbox? If so could you send me a link so that I can see how they manually construct their lightbox.

Thanks,
Shane

[olivierF]

It's not a plugin, it's pure css.

[Shane]

Hi Olivier,

Normally what happens is that javascript is used by the lightbox plugins to get the previous urls of the items on the page.

In your case you will need to use Javascript to get the url of the previous image and next url images.

Something like this
hidden link

Some javascript will be required for you to get the correct items.

Thanks,
Shane

[olivierF]

ok,
how does this translate with the use of a repeated field?

[Shane]

Hi Olivier,

On the frontend each image is self contained based on how you depict your html.

[wpv-for-each field="wpcf-photo-event"]
    <div class="column">
        <a class="lightbox" href="#[types field='photo-event' output='raw' [/types]">
        [types field='photo-event' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail'][/types]
        </a>
    </div>
    <div class="lightbox-target" id="[types field='photo-event' output='raw'][/types]">
        [types field='photo-event' title='%%TITLE%%' alt='%%ALT%%' size='large'][/types]
        <a class="lightbox-close" href="#"></a>
        <a class="previous" href="#[types field='photo-event' output='raw' [/types]"><</a>
        <a class="next" href="#[types field='photo-event' output='raw' [/types]">></a> 
    </div>
[/wpv-for-each]

Is there a documentation for the css that you are using to do this ? Could you send me that documentation ?

Thanks,
Shane

[olivierF]

there is the code css

/* Styles the thumbnail */
a.lightbox img {
  padding: 4px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
  margin: auto;
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */
a.lightbox-close {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-decoration: none;
  position: absolute;
  top: 150px;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
  content: "";
  display: block;
  height: 40px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
  content: "";
  display: block;
  height: 40px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top: 10px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
  opacity: 1;
  top: 10px;
  bottom: 0;
}

.lightbox-target:target img {
  max-height: 80%;
  max-width: 80%;
}

.lightbox-target:target a.lightbox-close {
  top: 130px;
}
 

[Shane]

Hi Olivier,

Rather than doing this manually because we will need to write special code for this.

I would recommend using this plugin below.
https://wordpress.org/plugins/fancybox-for-wordpress/#description
If you want my help with setting this up you're more than welcomed to provide me with access to the site but building out the JS code required to do the next and previous arrows is definitely out of the scope of what I can provide as support.

Thanks,
Shane

[Shane]

Private fields