Guest Posted April 15, 2007 Share Posted April 15, 2007 (edited) works like a charm.... :D Hate the fact that you were reading my mind though :P hehehe, thank you for this great contrib You're welcome :) Another couple of mods you can do to make your 3-D bar look better is the following: in stylesheet.css in the #showimage block, remove this line: border: 1px solid black; below the #showimage block, add a new block: .imgborder { border-top: 0px; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; } in enlarge.js, change this: <table width="'+imgwidth+'" border="0" cellpadding="0" cellspacing="0"> to this: <table width="'+(imgwidth+2)+'" border="0" cellpadding="0" cellspacing="0"> and change this: <img id="alt" src="'+which+'" onClick="closepreview();"> to this: <span class="imgborder"><img id="alt" src="'+which+'" onClick="closepreview();"></span> That makes the top-bar not have a border ;) Edited April 15, 2007 by DRIVE Quote Link to comment Share on other sites More sharing options...
Guest Posted April 15, 2007 Share Posted April 15, 2007 now you've confused the daylights out of me.... Can't find: in enlarge.js, change this: <img id="alt" src="'+which+'" onClick="closepreview();"> Here's my enlarge.js: /* Layer original */ /* original crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close Window [x] </span> </div><img src="'+which+'" onClick="closepreview();">' */ crossobj.innerHTML='<div id="dragbar"><table width="'+imgwidth+'" border="0" cellpadding="0" cellspacing="0"><tr><td width="11"><img src="images/infobox/corner_left.gif"></td><td align="center" background="images/infobox/corner_right_left.gif"><span id="closetext" onClick="closepreview()"> '+altquery+' </span></td><td width="11"><img src="images/infobox/corner_right.gif"></td></tr></table></div><img src="'+which+'" onClick="closepreview();">' Am I missing something? Quote Link to comment Share on other sites More sharing options...
Guest Posted April 15, 2007 Share Posted April 15, 2007 (edited) now you've confused the daylights out of me.... Can't find: in enlarge.js, change this: <img id="alt" src="'+which+'" onClick="closepreview();"> Here's my enlarge.js: /* Layer original */ /* original crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close Window [x] </span> </div><img src="'+which+'" onClick="closepreview();">' */ crossobj.innerHTML='<div id="dragbar"><table width="'+imgwidth+'" border="0" cellpadding="0" cellspacing="0"><tr><td width="11"><img src="images/infobox/corner_left.gif"></td><td align="center" background="images/infobox/corner_right_left.gif"><span id="closetext" onClick="closepreview()"> '+altquery+' </span></td><td width="11"><img src="images/infobox/corner_right.gif"></td></tr></table></div><img src="'+which+'" onClick="closepreview();">' Am I missing something? Use this: /* Layer original */ /* original crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close Window [x] </span> </div><img src="'+which+'" onClick="closepreview();">' */ crossobj.innerHTML='<div id="dragbar"><table width="'+(imgwidth+2)+'" border="0" cellpadding="0" cellspacing="0"><tr><td width="11"><img src="images/infobox/corner_left.gif"></td><td align="center" background="images/infobox/corner_right_left.gif"><span id="closetext" onClick="closepreview()"> '+altquery+' </span></td><td width="11"><img src="images/infobox/corner_right.gif"></td></tr></table></div><span class="imgborder"><img id="alt" src="'+which+'" onClick="closepreview();"></span>' Be sure to make the changes in your stylesheet and you'll be good to go :) also, gave you a bum steer on the transparency... the correct syntax is: background-color: transparent; Edited April 15, 2007 by DRIVE Quote Link to comment Share on other sites More sharing options...
Guest Posted April 15, 2007 Share Posted April 15, 2007 again, thank you James, you're a real star.... :thumbsup: :thumbsup: Quote Link to comment Share on other sites More sharing options...
Guest Posted April 16, 2007 Share Posted April 16, 2007 James, sorry mate.... Have another quickie... If you look at my images, I still see a black border right beneath the image left&bottom&right... Reckon I should just change the color or what? Quote Link to comment Share on other sites More sharing options...
Guest Posted April 16, 2007 Share Posted April 16, 2007 James, sorry mate.... Have another quickie... If you look at my images, I still see a black border right beneath the image left&bottom&right... Reckon I should just change the color or what? I think you want the border there so that you have a definition around the image. It will help the user focus more clearly so their eyes dont get scrambled on the surrounding content. You can change the color tho, thats an easy deal: .imgborder { border-top: 0px; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; } and you could change to something like: .imgborder { border-top: 0px; border-right: 1px solid FF0099; border-bottom: 1px solid FF0099; border-left: 1px solid FF0099; } or, choose another color from a chart such as this: Color Chart The site is looking good :) getting any sales yet or is it still closed? Quote Link to comment Share on other sites More sharing options...
Guest Posted April 16, 2007 Share Posted April 16, 2007 Hey James, no go... when we took the border of the top to display the 3d banners, we took it out there... Thanks man! Quote Link to comment Share on other sites More sharing options...
Guest Posted April 16, 2007 Share Posted April 16, 2007 Hey James, no go... when we took the border of the top to display the 3d banners, we took it out there... Thanks man! Whatcha mean no go? if you change the style block it WILL change the border color :) dont forget to reload a page so it reloads the stylesheet as well. The image Layer doesnt reload a new style on its own: .imgborder { border-top: 0px; border-right: 1px solid red; border-bottom: 1px solid red; border-left: 1px solid red; } also, on some browsers, the hash might be required in order to display a hex color: .imgborder { border-top: 0px; border-right: 1px solid #FF0099; border-bottom: 1px solid #FF0099; border-left: 1px solid #FF0099; } Am I understanding what you wanted to achieve? Quote Link to comment Share on other sites More sharing options...
Guest Posted April 16, 2007 Share Posted April 16, 2007 :D check it out... changed the code like yours above, but only shows the far bottom left, right and complete bottom... Thanks man... And o, to answer your previous question, shop will open within the week, people will just have to bear with me while we load the products.... But the wait will be worth it! Quote Link to comment Share on other sites More sharing options...
Guest Posted April 17, 2007 Share Posted April 17, 2007 :D check it out... changed the code like yours above, but only shows the far bottom left, right and complete bottom... Thanks man... And o, to answer your previous question, shop will open within the week, people will just have to bear with me while we load the products.... But the wait will be worth it! Ya, that's what you want. You could turn on the top border... try it and see if you like it but I think the way you have it is good. One thing I see that is an issue due to the length of your product names can be seen here: Click To avoid that, add the nowrap element to the cell that holds the product name: (in enlarge.js) <td align="center" background="images/infobox/corner_right_left.gif"><span id="closetext" onClick="closepreview()"> '+altquery+' </span> to this: <td align="center" background="images/infobox/corner_right_left.gif"><span id="closetext" onClick="closepreview()" nowrap>'+altquery+'</span> (*I also removed an extra space ( ) that you dont need since the product name is centered) Quote Link to comment Share on other sites More sharing options...
Guest Posted April 17, 2007 Share Posted April 17, 2007 (edited) James, how are you? I'm starting to think my Java versions are completely different to what you have :-" No matter where I stuck the nowrap in, it didn't work for me... So, I went on gracefully mangling up the code until I came to this point where it seems to be working.... crossobj.innerHTML='<div id="dragbar"><table width="'+(imgwidth+2)+'" border="0" cellpadding="0" cellspacing="0"><tr><td width="11"><img src="images/infobox/corner_left.gif"></td><td align="center" nowrap background="images/infobox/corner_right_left.gif"><span id="closetext" onClick="closepreview()">'+altquery+'</span></td><td width="11"><img src="images/infobox/corner_right.gif"></td></tr></table></div><span class="imgborder"><img id="alt" src="'+which+'" onClick="closepreview();"></span>' hehehe, hey, at least I didn't break my site :lol: :lol: A big public thank you to James (DRIVE) for his efforts and support to the OSC community! Edit -> Can't even spell properly these days.... Edited April 17, 2007 by rkscscc Quote Link to comment Share on other sites More sharing options...
T-bor Posted April 23, 2007 Share Posted April 23, 2007 Hy James, hy everyone! First of all, big thank to James, he did a really great job with "POP-UPs MASSAGEed". I'm really new to Oscommerce so don't know if my question/problem is simple but please answer it. :-" I'd like to have a page in my site where lots of images are shown. Only images, no product infos, no tables etc... Just pictures. But I'd like these images to pop-up just like the ones in the product categories. I'm fully a fresher to MysQl so I can't and I don't want to crash my site screewing up something in my database. I only want a directory full of images that popup in a sub-page of my site. Looking forward to the scripts :rolleyes: Thanx T-bor from Hungary :thumbsup: Quote Link to comment Share on other sites More sharing options...
Guest Posted April 24, 2007 Share Posted April 24, 2007 Hy James, hy everyone! First of all, big thank to James, he did a really great job with "POP-UPs MASSAGEed". I'm really new to Oscommerce so don't know if my question/problem is simple but please answer it. :-" I'd like to have a page in my site where lots of images are shown. Only images, no product infos, no tables etc... Just pictures. But I'd like these images to pop-up just like the ones in the product categories. I'm fully a fresher to MysQl so I can't and I don't want to crash my site screewing up something in my database. I only want a directory full of images that popup in a sub-page of my site. Looking forward to the scripts :rolleyes: Thanx T-bor from Hungary :thumbsup: Hi T-bor, If you are creating a static page of images and you want them to all to use the Layer then you can easily make it happen. POP-UPs MASSAGEed can work with links/images that you can create yourself. The link to the image uses three parameters: 1) location of the large image 2) width of the larger image 3) height of the larger image <a href="#" onclick="return enlarge(\'images/hatPH02-N.jpg\',event,\'center\',252,252);return false;"><img src="images/hatPH02-M.jpg" width="100" height="100" hspace="5" vspace="5" id="prodImage" border="0" alt="Baseball Hat" title="Baseball Hat"><br>Click to enlarge</a> Or, some things are not really needed for creating a static link to use the layer. Some slashes are removed as well as some formatting info: <a href="#" onclick="return enlarge('images/hatPH02-N.jpg',event'center',252,252);return false;"><img src="images/hatPH02-M.jpg" width="100" height="100" border="0" alt="Baseball Hat" title="Baseball Hat"></a> Of course you need to be sure to follow the steps that require you to modify the stylesheet, include the call to the enlarge.js in your web page and embed the placeholder for the layer in your web page. If you have basic knowledge of html, this will be very easy for you :) Happy imaging :D Quote Link to comment Share on other sites More sharing options...
Guest Posted April 24, 2007 Share Posted April 24, 2007 (edited) I made a mistake and removed crucial characters from the second example of a link: <a href="#" onclick="return enlarge('images/hatPH02-N.jpg',event'center',252,252);return false;"><img src="images/hatPH02-M.jpg" width="100" height="100" border="0" alt="Baseball Hat" title="Baseball Hat"></a> Should be (was missing a comma after event): <a href="#" onclick="return enlarge('images/hatPH02-N.jpg',event,'center',252,252);return false;"><img src="images/hatPH02-M.jpg" width="100" height="100" border="0" alt="Baseball Hat" title="Baseball Hat"></a> Edited April 24, 2007 by DRIVE Quote Link to comment Share on other sites More sharing options...
Guest Posted April 26, 2007 Share Posted April 26, 2007 (edited) POP-UPs MASSAGEed V1_5 released -- Product Name in Top-Bar of Layer is now default/standard -- Style modifications to eliminate dynamic menus and other layer-type components from overlapping very large images (See screencap_3 in package) -- code for 3-D top bar is included/optional (there is also quite a bit of user-input in the forum thread if you have any trouble with 3-D) Download: <a href="http://www.oscommerce.com/community/contributions,5010" target="_blank">http://www.oscommerce.com/community/contributions,5010</a> Enjoy :) Edited April 26, 2007 by DRIVE Quote Link to comment Share on other sites More sharing options...
Guest Posted April 26, 2007 Share Posted April 26, 2007 POP-UPs MASSAGEed V1_5 released -- Product Name in Top-Bar of Layer is now default/standard -- Style modifications to eliminate dynamic menus and other layer-type components from overlapping very large images (See screencap_3 in package) -- code for 3-D top bar is included/optional (there is also quite a bit of user-input in the forum thread if you have any trouble with 3-D) Download: <a href="http://www.oscommerce.com/community/contributions,5010" target="_blank">http://www.oscommerce.com/community/contributions,5010</a> Enjoy :) ****PS - I want to start including links to sites that use this contrib in the README file. If you are interested, PM me with the URL(s) to your sites. Also feel free to send me any screen captures of the contrib in use :D Quote Link to comment Share on other sites More sharing options...
Guest Posted May 5, 2007 Share Posted May 5, 2007 James, I have added your contribution to a site I am building, however I seem to be having a bit of a bug or error of some kind... The new window is showing up in Firefox and Netscape 7.02, but not in IE6, IE7 and Netscape 8.1.3... You can see the page here: http://sheloves.extremezone.com/catalog/pr...;products_id=28 I am a bit stumped...! Also, the close window X remains visible after I close the window... Help...! Thanks James Quote Link to comment Share on other sites More sharing options...
Guest Posted May 6, 2007 Share Posted May 6, 2007 James, I have added your contribution to a site I am building, however I seem to be having a bit of a bug or error of some kind... The new window is showing up in Firefox and Netscape 7.02, but not in IE6, IE7 and Netscape 8.1.3... You can see the page here: http://sheloves.extremezone.com/catalog/pr...;products_id=28 I am a bit stumped...! Also, the close window X remains visible after I close the window... Help...! Thanks James I have a couple of ideas you can try. I find it amusing that its IE that is giving the trouble. Usually its Firebox or Netscrape that is the loser. Anyway, you have a BOATLOAD of styles! You have the layer placeholder inside some kind of warpper: <body> <div id="wrapper"> **** inline stylesheet is here*** **** some more code yada yada*** <!-- body //--> <table border="0" width="100%" cellspacing="3" cellpadding="3"> <!-- Placeholder POP-UPs MASSAGEed Layer --> <div id="showimage" z-index="1024"></div> <!-- Placeholder POP-UPs MASSAGEed Layer --> Move the Placeholder under the <body> tag as noted in the installation file. I think that it doesnt like being inside the wrapper in IE. Im surprised it works in any browser actually. Like this: <body> <!-- Placeholder POP-UPs MASSAGEed Layer --> <div id="showimage" z-index="1024"></div> <!-- Placeholder POP-UPs MASSAGEed Layer --> Try that and let me know if that fixes it :) Also, on the close text issue, you must have tweaked something because everything closes for me. Does the issue still exist? Quote Link to comment Share on other sites More sharing options...
Guest Posted May 30, 2007 Share Posted May 30, 2007 (edited) Hi This is the first ever contribution i have used. All works fine but the image appears at the top of the site and not in the middle. It also moves that whole page. Please help and thanks again. Here a bit of help http://blackrivercigars.com//product_info....;products_id=45 Edited May 30, 2007 by Jbradley Quote Link to comment Share on other sites More sharing options...
Guest Posted May 30, 2007 Share Posted May 30, 2007 Hi This is the first ever contribution i have used. All works fine but the image appears at the top of the site and not in the middle. It also moves that whole page. Please help and thanks again. Here a bit of help http://blackrivercigars.com//product_info....;products_id=45 Hi JBradley, Thanks for posting the link. That is very helpful. You did not add the styles to your stylesheet as described in Step 2. Do that and it will work as expected. Quote Link to comment Share on other sites More sharing options...
Guest Posted May 30, 2007 Share Posted May 30, 2007 Hi JBradley, Thanks for posting the link. That is very helpful. You did not add the styles to your stylesheet as described in Step 2. Do that and it will work as expected. Gentleman and a scholar Quote Link to comment Share on other sites More sharing options...
zuluman Posted June 3, 2007 Share Posted June 3, 2007 hi i have z-index problem with flash swf object how to fix Quote Link to comment Share on other sites More sharing options...
Guest Posted June 3, 2007 Share Posted June 3, 2007 hi i have z-index problem with flash swf object how to fix Hi Zulu, I would need to have a link to a sample web page where the trouble is occurring. It doesnt mean I can fix it if you have it embedded in Flash but the image you posted doesnt let me get enough info. Quote Link to comment Share on other sites More sharing options...
staceyd Posted June 12, 2007 Share Posted June 12, 2007 Hi! What a cool contribution! I have a question, though. My thumbnails are a lower quality than I would like (it's a photography site.) They lose too much of their color information (like if there's too few colors selected when making a gif.) So, they appear almost monochromatic. Is there a way to fix this? Thanks so much! Stacey Quote Link to comment Share on other sites More sharing options...
Guest Posted June 12, 2007 Share Posted June 12, 2007 Hi! What a cool contribution! I have a question, though. My thumbnails are a lower quality than I would like (it's a photography site.) They lose too much of their color information (like if there's too few colors selected when making a gif.) So, they appear almost monochromatic. Is there a way to fix this? Thanks so much! Stacey Hi Stacey, There is no manipulation of the images by this contrib. What you see is what you got basically. If your larger images are poor quality you need to replace them with new ones of better quality. Often times, there are "control" images which are much much larger (physically and in KB) and then persons export them to a smaller "larger" image and then the thumbnails. If you have "control" images then you just need to export them with different quality settings. Not sure what your file extensions are but if its a photography site, all images should be .jpg because gif's have a max of 256 colors. .jpg's can have millions of colors. Just my thoughts. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.