Making photos in the "Classic Slider" clickable to enlarge?

[CalandJenThomas]

Hello, I am working on a site and I’m using the “classic slider” quite a bit.
I have a classic slider installed with the little arrows to flip through the images.

It works great and I was wondering if there was a way to make it so you could click an image in the slide and it will popup / enlarge ?

Maybe something like this?
( I’m very new to WordPress so I’m not sure where to implement these changes exactly )

/* Style the Image Used to Trigger the Popup */
.sliderimage {
cursor: pointer;
transition: 0.3s;
}

/* The Popup (background) /
.Popup {
display: none; / Hidden by default /
position: fixed; / Stay in place /
z-index: 1; / Sit on top /
padding-top: 80px; / Location of the box /
left: 0;
top: 0;
width: 100%; / Full width /
height: 100%; / Full height /
overflow: auto; / Enable scroll if needed /
background-color: rgb(0,0,0); / Fallback color /
background-color: rgba(255,255,255, 0.9); / Black w/ opacity */
}

/* Popup Content (Image) */
.Popup-content {
margin: auto;
display: block;
max-width: 700px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(0)}
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #333333;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

Is there is an easier way? I just want the image to come up large to see it more clearly upon clicking the slide.

Thank you for the help!

Jennifer T

[nabeel]

Hey Jennifer,

Thank you for reaching out to us. Yes it’s possible with lightbox shortcode. Edit your slide in Cornerstone and wrap your images in anchor tag, give it a class e.g slider-lightbox (to use it in the lightbox shortcode) and link it to the URL of the image in href attribute (the link of an image you provide here will open in the lightbox), so your whole code will look like this:

<a class="slider-lightbox" href="http://placehold.it/1800x600/3498db/2980b9"><img src="http://placehold.it/1800x600/3498db/2980b9" alt="Placeholder"></a>

Now in Raw Content element, paste the lightbox shortcode with the selector .slider-lightbox:

[lightbox selector=".slider-lightbox" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="false"]

Hope this helps!