Link to home
Create AccountLog in
Avatar of datacomsmt
datacomsmtFlag for Australia

asked on

jQuery - Displaying Image in Popup Window

Hi,

I have the following code below that opens a small pop-up window using JS. It's pretty ugly and I'd like to convert this to use jQuery as it's already in use on the website. I'm using the 'jquery.min.js' file.

The following properties would be needed:
- Pop-up window triggered by a text link
- Pop-up window height & width to automatically fit the size of the image (if not possible then height: 530pm / width 518px)
- No Toolbars
- All images would be pulled from the same folder on the server, in this case: /images/product-images/
- The full image name (eg. product-test-image-enlarge.png) would be rendered out by the tag {tag_custom1} by CMS

I know a pop-up window isn't ideal but due to constraints in the CMS I'm using I think it may be the only way. I'm open to any alternate suggestions you may have..

Thoughts?
<SCRIPT LANGUAGE="JavaScript"> 
function openindex() { var 
OpenWindow=window.open("", "newwin","height=530,width=518"); 
OpenWindow.document.write("<img src='/images/product-images/{tag_custom1}'>") OpenWindow.document.write("<br>") 
OpenWindow.document.write("<center><a href='javascript:self.close()' 
target='_self'>Close</a></center>") }
</SCRIPT>
 
<a href="javascript:openindex()" target="_self">Enlarge Image</a>

Open in new window

Avatar of anoyes
anoyes
Flag of United States of America image

jQuery has a ton of plugins to do pretty much anything, including popups.  (http://plugins.jquery.com).  You might also want to take a look at the jQuery UI library (www.jqueryui.com).
ASKER CERTIFIED SOLUTION
Avatar of anoyes
anoyes
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of datacomsmt

ASKER

Great anoyes, ThickBox seems perfect!

One problem tho - It seems to be clashing with something on the page I would like to use it on.. Could it be the Lightbox script? I need it to sit inside a Online Shop set-up which is maintained by a CMS system so I don't have access to the LightBox script..

http://madisonlane.businesscatalyst.com/_product_36331/Autumn_Dress

It works fine on a test page outside of the Online Shop - http://madisonlane.businesscatalyst.com/test
Yup, it's the lightbox script.  One thing you could try - the easiest solution assuming it works - would be to do a find/replace on the thickbox.js file and replace every instance of $ with jQuery.
Hum.. no luck with the find and replace. It breaks the script, even on the test page that was originally working (it was a straight swap $ for jQuery right?)

Any other ideas?
I've found the answer to my own question on the ThickBox forum:
http://codylindley.com/thickboxforum/comments.php?DiscussionID=1543&page=1#Item_0

I'm awarding the 500 points anyway Anoyes as you pointed me in the right direction to begin with, thanks!
cool, that was going to be my next suggestion anyhow.  glad you got it working!