Ajax Image Size
Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=795
Printed Date: 22-December-2024 at 2:14am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com
Topic: Ajax Image Size
Posted By: dott
Subject: Ajax Image Size
Date Posted: 10-May-2007 at 6:23pm
|
How can I modify the Ajax pop-up to use a larger image inplace of the small thumbnail image? I've edited the ei-tooltip.css to change the text color but not able to modify to use a medium or large image to display. ------------- dott |
Replies:
Posted By: fidjiti
Date Posted: 30-May-2007 at 12:59am
|
not sure, but I would like to know this too. :) ------------- Linda - I wish I knew ASP. To view my ever evolving site click the "www" button below. :) |
Posted By: netprofits
Date Posted: 30-May-2007 at 7:47am
|
Modify pc/xml_getPrdInfo.asp. Search for: Change pSmimageURL to pimageUrl or to pLgimageURL in all 3 places depending on whether you want the product detail image or the large (pLgimageURL) showing in the AJAX popup. ------------- NetProfits Internet Consulting Certified ProductCart Developer http://www.nicwebdesign.com" rel="nofollow - Our Site |
Posted By: fidjiti
Date Posted: 30-May-2007 at 3:59pm
|
I changed it to use the Large Image but I did have to do a lot of tweaking to the width in several places and had to edit the PNG files to accomodate the size change. So here's what I changed. I'll try to be as accurate as possible, but I don't remember everything I dinked around with. ***Remember - DUPLICATE or COPY your original files before editing them. Sop you can always revert back incase your edit doesn't workout for you. pc/xml_getPrdInfo.asp - 1. I changed what Netprofits told us to change. pc/ei-tooltip.css - 1. Changed anything that had 285 px to my new width of 355 px. (355px is the size i chose to use because my ajax pic is now 300x300px.) 2. Also changed the [code] .mainbox img padding: 3px [code] instead of the 5px. Just so the window would wrap around closer to the picture. pc/ei-tooltip.js - I changed several things here. Most of which had to do with the width of the images to accomodate the new 300px wide image. 1. Changed the ajax arrow to be closer to the pop-up. Mine was 54. [code] var offsetdivfrompointerX=50 [code] 2. Changed the old widths to the new 355 width. I didn't change anything else in the following code. [code] document.write('<DIV id="dhtmltooltip">') document.write('<DIV><IMG id="topbox" style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/topcap.png\'); WIDTH: 355px; HEIGHT: 21px" src="images/pngfix.png"></DIV>') document.write('<DIV id="titlebox" style="background-image:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/titlemiddle.png\');"><div id="tcontent" style="position:relative; padding:5px 0px 7px 20px; width: 355px; text-align: left;"></div></DIV>') document.write('<DIV id="boxcontent" style="background-image:none; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/contentmiddle.png\'); POSITION: relative"><div id="mcontent" style="position:relative; padding:5px 0px 7px 20px; width: 355px; text-align: justify;"></div></DIV>') document.write('<DIV><IMG id="bottombox" style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/bottomcap.png\'); WIDTH: 355px; HEIGHT: 25px" src="images/pngfix.png"></DIV>') document.write('</DIV>') document.write('<STYLE>') document.write('#boxcontent{width:355px; background-image:url(\'images/contentmiddle.png\');}') document.write('#titlebox{width:355px; background-image:url(\'images/titlemiddle.png\');}') document.write('</style>') [code] 3. Changed the following code to the 355 px "width" and if it had width after the word "padding" then I changed that to 300 because it made the whole pop-up slimmer. I didn't change any of the px which were 5, 0, 7, 20 or 21... just the really large px numbers. [code] document.write('<DIV><IMG id="topbox" style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/topcap.png\'); WIDTH: 355px; HEIGHT: 21px" src="images/topcap.png"></DIV>') document.write('<DIV id="titlebox" style="background-image:url(\'images/titlemiddle.png\'); width:355px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/titlemiddle.png\')"><div id="tcontent" style="position:relative; padding:5px 0px 7px 20px; width: 300px; text-align: left;"></div></DIV>') document.write('<DIV id="boxcontent" style="background-image:url(\'images/contentmiddle.png\'); width:355px; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/contentmiddle.png\'); POSITION: relative"><div id="mcontent" style="position:relative; padding:5px 0px 7px 20px; width: 300px; text-align: justify;"></div></DIV>') document.write('<DIV><IMG id="bottombox" style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/bottomcap.png\'); WIDTH: 355px; HEIGHT: 25px" src="images/bottomcap.png"></DIV>') document.write('</DIV>') [code] Images: pc/images/bottomcap.png, pc/images/contentmiddle.png, pc/images/titlemiddle.png, pc/images/topcap.png After playing with the sizes and everything, I needed to change the PNG files to match the sizes which I decided upon. I choose 355 so, you must adjust the PNG files above to the width which works for you. (DUPLICATE the image files before editing them) I use Photoshop CS2 to make the changes to the PNG files. Just open the files, then select "Image>Image Size" then simply enter the new width you need them to be. This will extend your images and keep the aspect ration the same. Now re-save these images and replace the old ones. Uploading: Now upload the newly edited PNG images and your edited files to your site and replace the files with your new ones. You should be all set! If for some reason things don't line up or they stick out from your box, just tweak the numbers around. Disclaimer: You can always revert back to your original files which you duplicated if you don't like the way it turns out. I will add that for some reason when I hover over an image or detail button from the right side of the page and the pop-up has to load to the left of the mouse pointer my pop-up blinks like crazy. I don't know why that is.??? Any ideas would be helpful. Good luck and let me know if it works for you, too! You can see mine in action here: www.fidjiti.com P.S. Don't copy the code above because it won't paste correctly, it's just for reference so you can all see what numbers and where I changed them. ------------- Linda - I wish I knew ASP. To view my ever evolving site click the "www" button below. :) |
Posted By: dott
Date Posted: 30-May-2007 at 4:44pm
|
Exactly what I was looking for! Here is the code snippet that was changed from the xml_getPrdInfo.asp if pimageURL<>"" and pimageURL<>"no_image.gif" then
Thanks much! ------------- dott |
Posted By: @nna
Date Posted: 03-October-2007 at 9:31am
|
Thanks, I have also been looking for a way to do this. It worked just fine: http://www.jewel.se - www.jewel.se - Thanks again, Anna / Sweden |
