Change Caption Location?

Hi,

For the position you can override the .szg-caption class in your themes css, just change the value for the bottom position to minus the height of the caption, for example to -30px.

To avoid the mouseover effect, you could try to add display: block !important

Then you’ll end up with this in your themes CSS:

.szg-caption {
  position: absolute;
  bottom: -30px;
  height: 30px;
  left: 0;
  width: 100%;
  padding: 0.5em;
  background-color: rgba(255, 255, 255, 0.4);
  display: block !important;
}

I haven’t tested this, but this would be my first try.

In general, it is often best to avoid changing the plugin’s files to avoid problems with plugin updates.

Hope this helps!

Kind regards,

Niels

Indeed! this solved the hover problem, and thank you so so so much!!
however when the caption is moved underneath the image it disappears
I have diagnosed this from the “overflow: hidden” aspect of the szg-main class

.szg-main {
min-height: 30px;
position: relative;
overflow: hidden;
margin-bottom: 5em;
cursor: crosshair;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

When I turn this to visible however, the full size image appears underneath the caption…
I’ve also tried to add ‘overflow: visible !important;’ to the szg-caption class, but no dice…

Thanks again for your help, hopefully this can be figured out..

This is where things get al little bit ugly, you could, and I hope there are better solutions, change the javascript code (I do not recommend this because of the earlier mentioned update problems).

This is the original:

function changeMediumImageSize(medium) {
    var main = medium.parent();
    main.css({width: medium[0].width, height: medium[0].height});
    var loader = main.find('.szg-medium-loader').first();
    hideLoader(loader);
    var zoombox = main.parent().find('.szg-zoom-box').first();
    zoombox.css({left: medium[0].width+10, height: medium[0].height})
  }

And you could try changing it to (replace 30 with the height of the caption):

function changeMediumImageSize(medium) {
    var main = medium.parent();
    main.css({width: medium[0].width, height: medium[0].height+30});
    var loader = main.find('.szg-medium-loader').first();
    hideLoader(loader);
    var zoombox = main.parent().find('.szg-zoom-box').first();
    zoombox.css({left: medium[0].width+10, height: medium[0].height})
  }

This is ugly I know, if I think of something better I’ll let you know.

Niels

Worked great with a little tweaking, thank you so much!

xoxox

d

Your welcome, glad I could help.