Hi,
Relates to:
– Newspaper theme v7
– tag div slide gallery
I would like to prevent from opening the picture and showing them as an overly when clicking on the image in the slide gallery. Where can I disable this?
Thank you very much.
Kind regards,
Theo
Hi,
Unfortunately there is no way of removing the lightbox on a tagdiv gallery. It’s the way the gallery was created. you can use a css trick though to make it not clickable if this is what you are after:
.post_td_gallery .td-slider{
pointer-events:none!important;
}
You can add this code in the theme panel-> custom css box
Thank you!
Hi Bogdan,
Thank you for your support. I added the CSS code as suggested.
It works such that when I click the image the lightbox does not show.
However, swiping through the images on the touch screen is no longer possible. I only wanted to disable bringing up the image in the lightbox.
Could this be disabled by changing the php code?
Thank you,
Theo
Hi,
Please use this code:
http://pastebin.com/BfqSkxq6
And replace the one from the theme: http://screencast.com/t/yl6gVJBh
This should remove the link from the images and provide the results you want.
Thank you!
Hi Bogdan,
Thank you very much. Now, it works exactly as I envisioned it.
I really do like your Newspaper theme. It allowed me to create a really beautiful webpage in a very short amount of time. The generic framework that allows posts to be pulled in for display according to categories and tags is so powerful.
Thank you for this great product and your excellent support.
Kind regards
Theo
Hi Theo,
Thank you for your kind words. It’s always good to see our hard work is appreciated.
Have a nice day!
Hello again,
I have another question related to the tag div slider. I changed the td_wp_booster_functions.php as you suggested (see above previous conversation). This prevents the tag div slider to open a modal dialogue.
However, I just noticed recently that the images are shown off center such that the bottom of the image in the slider gallery is cut off a bit and there is extra space at the top of the image. To correct for this, I added the following custom CSS code in the theme panel:
.td-slide-item .td-slide-galery-figure img {
bottom: -40%!important;
}
This corrects the offset. Is this the right way to fix this issue?
Link to page with tag div slide galery: http://tedlansingphotography.com/projects/steamboat-stadt-rapperswil/
Thank you very much for your support.
Kind regards,
Theo
Hi,
Well if it works then it;s the right way đ There is no right and wrong way. The customization made the images not display properly and it had to be adjusted with css. Nothing wrong there.
Thanks.
Hello, I had the same question and found this post. Can you please let me know about this?
Also, how can the slider “fit” to my image size?
Hi theheritagelab,
So you want to no longer open the gallery image in the popup modal? For this, you can try this custom CSS:
.td-gallery .td-doubleSlider-1 .td-slide-galery-figure{
pointer-events:none!important;
}
The code can be set in the theme panel > custom code> custom css.
I hope this will help you!
Thank you!
Hi, Sorry I think I missed your response earlier.
Thank you, it helped. Though I’m still trying to understand how to fit the gallery to image size?
Hi,
For how to fit the gallery to image size, do you refer to this https://i.imgur.com/au4dyxZ.png ?
If yes, the gallery comes with a width of 100% of the content width, and the images are automatically aligned in the middle, this solution was adapted to keep a similar appearance for all the galleries, so as not to have one bigger and one smaller.
Thank you!
Hi Calin,
Understood! Yes, I was referring to the same. I noticed in another thread, your suggestion to make the image bigger by using this code (shared below) – doing this helps me, but the mobile version has too much empty space around the image. Is there a way to make it appear “fitting” to the mobile version as well? Essentially I’m trying to make it look like how Theo has (comment above)– like this
.td-slide-on-2-columns .td-doubleSlider-1 .td-slide-galery-figure img {
max-width: 1920px!important;
width: 100%!important;
}
.td-slide-on-2-columns .td-doubleSlider-1 .td-slide-galery-figure img{
max-height: 1920px!important;
}
.td-slide-on-2-columns .td-doubleSlider-1, .td-slide-on-2-columns .td-doubleSlider-1 .td-slide-galery-figure{
height: 640px!important;
}
Hi,
By default, it should look like this https://i.imgur.com/iJNJgeu.png – https://demo.tagdiv.com/newspaper_pro/td-post-study-2020-fake-engagement-is-only-half-the-problem/ now, if is not like this, please provide a screenshot and a link to the gallery to inspect it.
Thank you!
Hi,
For desktop version please tr this code – https://i.imgur.com/T5zlJFx.jpg
.td-slide-on-2-columns .td-doubleSlider-1, .td-slide-on-2-columns .td-doubleSlider-1 .td-slide-galery-figure{
height: 460px!important;
}
or this one – https://i.imgur.com/tJbBPjA.jpg
.td-slide-on-2-columns .td-doubleSlider-1 .td-slide-galery-figure img {
max-width: 960px!important;
width: 100%!important;
}
.td-slide-on-2-columns .td-doubleSlider-1 .td-slide-galery-figure img{
max-height: 960px!important;
}
.td-slide-on-2-columns .td-doubleSlider-1, .td-slide-on-2-columns .td-doubleSlider-1 .td-slide-galery-figure{
height: 720px!important;
}
Set it in this place – https://i.imgur.com/M8gkahg.png
Thank you!
Hi Calin,
I tried both and that was exactly what I needed! However, going by the second code option, if I use a portrait image, the image appears a little skewed. I also notice the space between the images and caption in some is a bit more than the others.
The first option though, works perfectly, so am going with that.Thank you for your patience and help!
PS: the first option works if I change background etc. to white. If I don’t the gallery remains as wide with extra black space đ In the second option, the portrait images are enlarged / zoomed in (not skewed, as I wrote earlier) and fill the container instead of retaining their portrait-orientation.
Hi theheritagelab,
Unfortunately, the only way to be able to adjust it will be if you use only one size for all images from the gallery, for example 640×320, if each image has different dimensions then, then will be better to use the default settings for CSS that comes with tagDiv gallery.
Thank you for your understanding!
Hi Calin, pinging for your attention again – somehow, the ‘pointer-events:none!important;’ is not working. I have also “disabled Photoswipe” on this post and yet the gallery opens in a Lightbox. I’d really appreciate it if you could please give this a look.
Hello,
You can disable now the lightbox for Gallery in Gutenberg https://i.imgur.com/LJVfQDA.png
Thank you!
Hi Anamaria,
I am aware of that function – however, while inserting the TagDiv slider gallery, I use the “Classic Edit” >> Create Gallery >> Type (TagDiv). This ensures that I don’t get the option you mentioned. If you see the string of conversation above, Calin had proposed a CSS which worked initially but is not working now.
Hi,
You can disable the classic editor and disable the option from Gutenberg, and after activating back the plugin.
Thank you!
Hey,
So I tried – but adding the “gallery” via Gutenberg, I don’t see an option to choose a Tag Div Gallery style. The result is therefore a default WP gallery. Here, I get the option of enabling or disabling the Theme Lightbox.
In the classic edit I can choose gallery style = TagDiv.
Is there another way to add a TagDiv gallery that I am missing?
Hi,
I think that you are referring that images like this – https://i.imgur.com/7ziKIcH.png become like this – https://i.imgur.com/NyADKnY.jpg unfortunately, img-type elements can have their height adjusted according to their width, but not the other way around, a css to make this image appear normally would ruin the others.
Thank you!
