Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Contribution] POP-UPs MASSAGEed


Guest

Recommended Posts

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 by DRIVE
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by DRIVE
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

: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!

Link to comment
Share on other sites

: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)

Link to comment
Share on other sites

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 by rkscscc
Link to comment
Share on other sites

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:

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by DRIVE
Link to comment
Share on other sites

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 by DRIVE
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 4 weeks later...
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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

hi

i have z-index problem with flash swf object

how to fix

 

zindexom2.jpg

 

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...