-
Posts
-
Hey guys, I have two issues.
1. When I select “yes” to display lightbox in the gallery settings, It displays the element lightbox over the default WP lightbox. When I select no, the left and right image navigation arrows are not active.
2. I need to be able to display image information within the lightbox. Displaying the title would be fine. On the default WP lightbox, it is somewhat doing this (randomly displaying title on some and not others)
the link is – http://codelessme.com/casey/abstracts/
Thanks in advance
Hi David!
1.) You can disable the default lightbox by editing js > avia.js, find this code on line 54:
//activates the prettyphoto lightbox $(container).avia_activate_lightbox({callback:'avia_lightbox_callback'});Replace it with:
//activates the prettyphoto lightbox //$(container).avia_activate_lightbox({callback:'avia_lightbox_callback'});Remove browser cache then reload the page a few times.
2.) You can set the image title and description on Media > Library panel.
Cheers!
IsmaelHey Ismael,
I would rather disable the fancy box. Also- I have a title set, but nothing is showing up on the default wordpress pop-up images. See the reference link again to review. (close the fancy box to display wordpress default)
Hey guys – any word on this yet? Still need to be able to:
Have ONLY default lightbox show on gallery image click
Have title display to the right of the left/right/play icons. I’ve seen this on a site before but not sure how to complete it.
Thanks in advance.Hi!
We really can only help you with the theme and what is doing. I don’t know where the source of the other lightbox is coming from but the theme doesn’t use Fancy box.
You can add image information when you add images either on upload or in the Media information for each image in your gallery (title, description etc).
Best regards,
DevinOk Devin,
Sorted the issue with the Fancybox pop up. Now – I have tittles added to the images, but they don’t show anywhere on the lightbox. Do they normally display by default?
Also – take a look at http://codelessme.com/casey/abstracts/ I’ve used the Shop Category(450×450) but it seems the 1 thumbnail is not cropping on 4th row.
Hey!
Edit the images on the Media > Library panel then add the title on the “Alternative Text” field. They should show on top of the images when you open the lightbox.
Maybe the image has a different ratio. Please add this on Quick CSS to define a max height for the product images:
#top div .avia-gallery img { max-height: 333px; }Regards,
IsmaelGood morning Ismael,
I have added the same info to title, description, and alt to the last photo in the group in the Abstracts page, but still nothing is showing. What else do you recommend? I have no other plugins installed on this site that would affect titles/images.
Hey!
The image links do not contain an alt text or description text at the moment. Please go to Media > Library, edit the image(s) and insert some text into the “Alternative” and “Description” text field: http://www.clipular.com/c/6564099634757632.png?k=1teomXvbIbplXGlamY9sDokB6bk
Regards,
PeterHey guys – got the title bit sorted. Size is now regulated on desktop. Only issue remaining is, on mobile, a couple of the thumbs are not square as they should be ( Same issue we solved by using:
#top div .avia-gallery img {
max-height: 333px;
}for desktop)
Lastly – how do we make sure that applies to those images on mobile as well?
Hey!
Please use this to constrain the height of the images on mobile view:
@media only screen and (max-width: 767px) and (min-width: 480px) { #top div .avia-gallery img { max-height: 132px; } }Best regards,
IsmaelHey Ismael.
Still having the issue. Funny thing is – it is the 3rd image down in both galleries. Not sure why it would define a different height for a single image.
Thanks in advance
DavidHey guys.
Checking in on this one to see if there is something else that can be done. I implemented the above snippet mentioned by Ismael, but it doesn’t seem to be working on responsive.
Cheers,
DavidHi!
The css from ismael is not in your quick css that I can see. Instead you have:
@media only screen and (max-width: 767px) and (min-width: 480px) { #top div .avia-gallery img { max-height: 333px!important; } }Cheers!
DevinHey Devin.
I was trying to play with the numbers. Have adjusted it back to 132 again. Still no change.
That image is sized at 414×450 while the rest are 450×450. If the root dimensions before being uploaded are not over 450×450 (like that image isn’t) then WordPress shrinks it down to fit at its longest edge. In this case that leaves it taller than the other images.
Right now I only see it causing an issue on true mobile size. So you could wrap the max-height in a media query for mobile specifically to shrink it down even further with something like this:
media only screen and (max-width: 479px) { #top div .avia-gallery img { max-height: 79px; } }Ultimately the issue just stems from using an image that is too small on one edge from all of the others.
Hey Devin,
Actually, that isn’t true. The images are all different sizes. If you open them in the lightbox, you will see that they range in height and width. Like I said, for some strange reason, it is the case on both galleries, 4th row, mid image. I have added your recommended snippet. Still getting the same results.
HI guys,
I resolved the issue. So it looks like it was a combination of things, but in the end, Devin – I changed those two image sizes and it worked as you mentioned. Thanks for the attention to this.
David
- The topic ‘Enfold > Gallery > Lightbox’ is closed to new replies.