Photo WATERMARK overlay (with or without Lightbox)

7 posts by 3 authors in: Forums > CMS Builder
Last Post: March 20, 2015   (RSS)

By csdesign - February 24, 2015

Hello! 

I am using Lightbox from github to display enlargements of photos.  ( http://www.billdraker.com/bird-photography.php

Can anyone help me with adding a transparent graphic or text WATERMARK overlay to photos via cmsb code, lightbox.js / lightbox.css ? 
I checked the add-ons and cmsb cookbook but I don't see any for Watermarks. Adding the watermarks to the photos in photoshop or lightroom
is not an option because there are already hundreds of photos loaded. 

just for reference - this is the section of lightbox code for the gallery page listed above:

<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[uploads]" title="<?php echo $upload['info1'] ?> <?php echo $record['title'] ?>  © Bill & Sharon Draker"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="1" alt="<?php echo $record['title'] ?>  <?php echo $record['tags'] ?>" /></a>

lightbox.js and lightbox.css attached. 

Thank you!!  Tina

Attachments:

lightbox.css 2K

lightbox.js 18K

By Toledoh - February 24, 2015

interactivetools.com did some custom work for me a while ago - it works a treat! You can see the logo on all photos here: http://blakemachinery.com.au/

Cheers,

Tim (toledoh.com.au)

By csdesign - March 20, 2015

Thanks guys!!  Going back to work on this today. 

I also received this from another forum so I'll be trying both: 

The CSS:

.imagearea {width:640px;height:480px}
.overlay {position:absolute;visibility:visible;z-index:9999;color:#fff;font-family: Arial, serif;padding:20px;}

The HTML:
< div class="imagearea" >
< div class="overlay" >
Overlaid text or transparent PNG watermark
< /div ><! end overlay -->
< img src="imagefolder/image.jpg" >
< /div ><! end imagearea -->

By Toledoh - March 20, 2015

Are you wanting to protect the image from people downloading it and using it elsewhere?  If so, the css version will not work. You need to imbed the watermark into the image.

Cheers,

Tim (toledoh.com.au)

By csdesign - March 20, 2015

Hi Tim, 

That would be ideal but I wasn't sure that was possible since all the images are already uploaded.  In a perfect world, they would have been watermarked before upload, but they were not so I'm trying to find a fix.

Thanks, Tina

By Toledoh - March 20, 2015

That's exactly what I have on the Blake Machinery link above. And it can be applied to existing images. Send an email to consulting and mention that site. I think Greg did it. 

Cheers,

Tim (toledoh.com.au)