If you want your images to be only displayed in the selected layout and do not want to enlarge the images, you can disable the large image viewer with the help of CSS/HTML/script override.
Find the relevant code:
- Copy the entire script mentioned below. This would work on all the grid layouts.
<script type='text/javascript'>
$(document).ready(function () {
setInterval(function(){
$('.stage-spacing .grid-item').removeClass('js-grid-item');
}, 1000);
});
</script>
<style>
#photo-gallery .grid .grid-item {
cursor: inherit;}
</style>
- Copy the entire script mentioned below. This would work on the vertical slider and vertical slider detailed layout.
<script type='text/javascript'>
$(document).ready(function () {
setInterval(function(){
$('.stage-spacing .slideshow-item').removeClass('js-slideshow-item');
}, 1000);
});
</script>
<style>
@media screen and (min-width: 1024px){
.vert-slideshow .slideshow-item img {
cursor:inherit !important;
}}
</style>- Copy the entire script mentioned below. This would work on a single image layout.
<script type='text/javascript'>
$(document).ready(function () {
setInterval(function(){
$('.stage-spacing .lslide').removeClass('js-slideshow-item');
}, 1000);
});
</script>
<style>
.light-slider .lslide img { cursor:inherit !important;}
</style>- Copy the entire script mentioned below. This would work on slider and slider with scroll image layout.
<script type='text/javascript'>
$(document).ready(function () {
setInterval(function(){
$('.stage-spacing .list-active').removeClass('js-slideshow-item');
}, 1000);
});
</script>
<style>
@media screen and (min-width: 1024px){
.slidee li.list-active {
cursor:inherit !important;
}}
</style>Note: To disable any particular gallery large image viewer, you need to append gallery id with .stage-spacing class. You can get the gallery ID with help of a browser inspector. If you need our help, please ping us from studio chat or mail us at support@pixpa.com.
Follow the below steps to apply the code:
- After copying the relevant code, go to Settings (1).
- In the External Scripts (2), paste the code in the <body> section (3).
- Hit the Save (4) button to save the changes in the studio.
Now, refresh the site to review the changes on the live site.