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

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

Your welcome, glad I could help.