DOM Trick: de-thumb an image URL
When ExpressionEngine auto-creates a thumbnail image, it gives the option for creating the markup to display the full size image in a new, pop-up window or in a blank window. If you’re like me, those options aren’t optimal. So I put together a handy 4-line Javascript DOM trick to give me other choices.
For a recent project, I needed a way to display a full size image using Lightbox JS. I’m asking the user to do the minimum work ( simple, not simpler™ ) when uploading the image and only embed the URL to the thumbnail in a custom field. The thumbnail image is displayed in the template.
Problem: Find the URL of the full-sized image given only the thumbnail URL.
Solution: DOM scripting, of course.
Setup
I first had to make sure ExpressionEngine wasn’t adding a <p> element around the thumbnal image URL. In the Weblog Field editor, I turned off “XHTML” and set the format to “none”.
In the template, I wrapped an <a> element around the custom field:
<a id="thumb" href="" rel="lightbox">{da_image_thumb}</a>
//rel="lightbox" needed when using Lightbox JS
I placed the following function in the <head> section:
function de_thumb()
{
var thumb = document.getElementById("thumb");
var img = thumb.getElementsByTagName("img");
var src = img[0].getAttribute("src");
thumb.setAttribute("href",src.replace("_thumb", ""));
}
I then placed the following event handler in the template to activate the function:
<body onload="de_thumb();">
What is does
The function gets the <a> element with the id of “thumb”. It then gets access to the src attribute of the <img> element inside (contains the URL to the thumbnail). Finally, it removes the “_thumb” portion of the URL and stores the new URL back into the src attribute.
The result is that the link now points to the URL of the full size image.
Comments
No one's commented yet. Add yours!
Add Comment