ELPage
-
Posts
3 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by ELPage
-
-
@paul2009 This was the perfect fix and I can't thank you enough for providing the code for portrait option. Is there a code to use when an image needs to be square? I'm working with an artist's site and the images are portrait, landscape and square on the product pages.
-
Hi All,
I'm using this CSS code injection to header but I can't adjust font or positioning of the caption. It crosses over the image at the bottom on desktop and through the bottom 2/3rds on mobile. Any idea how to fix?<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
function createNodeCaption(textContent){
var divElement = document.createElement("div");
var pElement = document.createElement("p");
pElement.innerHTML = textContent;
divElement.classList.add("style-gallery-lightbox-text");
divElement.appendChild(pElement);
return divElement;
}
$( document ).ready(function() {
var itemGallery = document.getElementsByClassName('gallery-grid-item');
var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');
var countGalleryItem = itemGallery.length;for(var i = 0; i < countGalleryItem; i++){
if(itemGallery[i].getElementsByTagName('p').length != 0){
var text = itemGallery[i].getElementsByTagName('p')[0].textContent;
var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0];
itemNeedCaption.appendChild(createNodeCaption(text));
}
}
});</script>
<style>
figcaption.gallery-caption.gallery-caption-grid-simple {
display: none;
}
.style-gallery-lightbox-text {
padding: 10px 0px 25px 0px;
display: block;
position: absolute;
left: 50%;
top: 90%;
width: 100%;
transform: translate(-50%, -50%);
font-size: .3em
text-align: center;
}.style-gallery-lightbox-text p {
width: 90%;
padding: 10px 15px;
margin: auto;
color: gray;
background-color: rgba(0,0,0,0);
}
@media screen and (max-width:767px) {
.style-gallery-lightbox-text {
top: 70%;
}
}
</style>
}
Aspect Ratio - How to individually resize the images on my product page?
in Fonts, colors and images
Posted
@paul2009 sent you a direct message with more info.