How to add captions to light ox gallery

[mas00]

I’m having 2 issues. How do I add text captions to the lightbox item which would be with a gallery on the right side.

Also how to make it responsive, change the color of the text instead of just staying in one corner?

[SeaTheme]

Hi there,
Welcome to SeaTheme forum.
Are you asking about the HTML5 or WordPress version?

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[mas00]

HTML5 version..

<div class="list-layout-col list-layout-col1 clearfix">
<div class="list-layout-col1-item list-layout-item">
<div class="list-layout-inside">
<div class="single-image mouse-over" data-lightbox="true"> 
<a title="" href="https://via.placeholder.com/885x525/b3b3b3/333333.jpg"> 
<span class="ux-lazyload-wrap" style=" padding-top: 59.322033898305%;"> 
<img alt="raw-003" src="img/blank.gif" width="885" height="525" /> 
	</span> 
  
</div><!--End single-image-->

[SeaTheme]

Hi,please add the caption text into data-title=”Image Caption” on the tag a
<a data-title="Image caption text here" href="https://via.placeholder.com/885x525/b3b3b3/333333.jpg">

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[mas00]

didn’t work

[mas00]

However when I add this it does show up it is not responsive tho and I’m not sure how to add it to each lightbox.

It is static/ the same for each image.

<div class=”pswp__dynamic-caption pswp__hide-on-close pswp__dynamic-caption–aside” data-pswp-caption-type=”aside” style=”left: 840px; top: 30px; transform: translateY(0px);”><b>Lorem ipsum dolor (1933)</b><br>Color photograph<br>12 x 10</div>

[mas00]

There is no way to post screen shots??
1. Press collage and 2 of the same images show up. I have already replaced the JS folder.

2. On mobile (android) when you scroll down to the bottom you can see the text title overlap each other. The left text title “proposal for Labyrinth” and icon arrow do not hyper link to destination anymore. The hyperlink doesn’t work all because I added margin-top -90px to the code. How do I make hyperlink work without removing margin top?

Also there is a large right margin, you can zoom in and out of the whole page on mobile.

3. Last I just want to make the text larger on mobile while staying the same size on desktop.

[SeaTheme]

However when I add this it does show up it is not responsive tho and I’m not sure how to add it to each lightbox.
It is static/ the same for each image.
<div class=”pswp__dynamic-caption pswp__hide-on-close pswp__dynamic-caption–aside” data-pswp-caption-type=”aside” style=”left: 840px; top: 30px; transform: translateY(0px);”><b>Lorem ipsum dolor (1933)</b><br>Color photograph<br>12 x 10</div>

it is not a correct way. please add the caption text into data-title=”Image Caption” on the tag a
<a data-title="Image caption text here" href="https://via.placeholder.com/885x525/b3b3b3/333333.jpg">
If it does not work on your website, leave the issued page URL.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[SeaTheme]

1. filter issue
please send the HTML file zip(excludes the image files) via a cloud disk or seatheme.net@gmail.com.
I will check your files.

2. 3. the screenshots are broken, you should paste a image file(like .jpg .png) instead of a html
https://www.dropbox.com/s/y3s0pmy4raakfbv/WX20230710-202705.png?dl=0

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[mas00]

I will send screen shots via dropbox later,

The first is not about adding captions, it is about how they do not hyperlink to the destination understand?

[mas00]

1. hyperlink for the icon arrow and title text will not work. How do I make hyperlink work without removing margin top?
https://www.dropbox.com/s/euu9olzlfoophjs/Screenshot_20230709_114255.jpeg?dl=0

2. How do I stop the title text from overlapping on mobile?
https://www.dropbox.com/s/oqm9al008ezmzmc/Screenshot_20230709_114012.jpg?dl=0
https://tomasvmoreno.com/My%20Pops%20(Sacrifice).html

3. When I test on android phone, there is a big margin on the right hand side. The whole webpage shifts left but not right. you can zoom in and out of the whole page on mobile when you scroll all the way down to the end of page on mobile.

4. I just want to make the text larger on mobile while staying the same size on desktop.
https://tomasvmoreno.com/news.html
https://www.dropbox.com/s/fuedr8pnj2lfzzp/Screenshot_20230709_114057.jpg?dl=0

[mas00]

^ 3: android phone, there is a big margin on the right hand side.
https://www.dropbox.com/s/d4jls4r04so4ht0/Screenshot_20230709-112943_Chrome.jpg?dl=0

[SeaTheme]

1 / 2
Please reorganize HTML codes of the post-navi section(click) , refer to the below HTML tree:

<div class="module col-12 bm-wrap keep-origin-layout-mobile">
<div class="module-inside "> 
<div id="" class="module col-6 module-id-1578025671039 moudle_has_animation" data-module-col="6">
<div class="module-inside "> 
<div class="post-navi  ...
<div id="" class="module col-6 module-id-1578025671040 moudle_has_animation" data-module-col="6">
<div class="module-inside "> 
<div class="post-navi  ...
...

It maybe need some CSS, I will send it based your new HTML codes.
DO not use negative the margin-top.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[SeaTheme]

3/4 Please check HTML carefully, some tags are not closed, like this HTML: https://tomasvmoreno.com/My%20Pops%20(Sacrifice).html
There are 120 <div ,only 118 </div>
Please check other tags also.
same issue for news.html

check: https://www.dropbox.com/s/egllyz4os5zyefj/WX20230711-091602.png?dl=0

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[mas00]

Please send whol code I do not understand this organization I did what you said and now the whole web page is messed.

[mas00]

Please send whole code I do not understand this organization I did what you said and now the whole web page is messed.

[mas00]

https://www.dropbox.com/s/ddfqdo8agpl9hye/Screen%20Shot%202023-07-10%20at%208.34.54%20PM.png?dl=0

https://www.dropbox.com/s/59me3dchsru0mud/Screen%20Shot%202023-07-10%20at%208.35.06%20PM.png?dl=0

[mas00]

Closing tags has nothing to do with making the font a different size on mobile.

Closing tags doesn’t make a 30px margin or having the whole page zoom in and out

[mas00]

I have closed all tags on all web pages which there were not a lot.

On mobile I am still dealing with all these same issues. New.html, wide margins, etc.

I also sent the html file for the filter.

I need these last things fixed. Please advise. The last instructions about arrow icons and hyperlinks didn’t work.

[mas00]

https://www.dropbox.com/s/ha8b27dk5ehlheb/Screen%20Shot%202023-07-11%20at%201.22.57%20PM.png?dl=0
https://www.dropbox.com/s/303dj8hqzjrtd0q/Screen%20Shot%202023-07-11%20at%201.29.14%20PM.png?dl=0
https://www.dropbox.com/s/s7xddaj5kj1820z/Screen%20Shot%202023-07-11%20at%201.29.40%20PM.png?dl=0

This was taken after I have closed all tags

[SeaTheme]

This reply has been marked as private.

[Author]

Posts