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
Hi,
, Let’s see how far I can go with Sulumits Retsambew SEO Contest.
This time I am full charged to Win Sulumits Retsambew along with this I do want to measure my SEO skills, well some cash money too
Social network marketing
By Social network marketing on 2009 06 11
Good morning. Very nice site. Will sure visit again. Help me! Looking for sites on: Lamisil forum. I found only this - lamisil once jock itch. Prescription drug treatments to cure fungus, fungal and yeast amphotericin and nystatin the polyenes. Antihistamines arthritis drugs atypical antipsychotics. With best wishes :rolleyes:, Baylor from Antigua.
By Baylor on 2009 06 21
Simple and effective solution! Thank you so much for this handy little script. I will definitely be back to your site for more useful tools like this.
Forex News
By Forex News on 2009 06 23
Add Comment