Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Shadowbox For Product_Info.php


desiredin

Recommended Posts

I personally will not be much help in support. Probably a miracle I got it working for myself. Heh. But found so much usefullness in it, I had to share. ;) It's pretty slick looking.

Edited by desiredin
Link to comment
Share on other sites

  • Replies 108
  • Created
  • Last Reply

Top Posters In This Topic

Here's some capabilities I've thrown up: http://www.visceralmagic.com/product_info.php?products_id=7

You can see more of what Michael Jackson's Shadowbox is capable of at http://mjijackson.com/shadowbox/

 

From that URL on my server I have provided, on the view page link, you are able to create an account through that page, so it may come in handy for someone. Perhaps create duplicate pages (login and create account) with script to automatically close the window after an account has been created or user had logged on? Would be a nifty little feature so the customer isn't taken away from the product he/she was looking at. Or support forums for the product.

Link to comment
Share on other sites

Here is what I have put in my product's description (so you can see how it all works) to get everything there (except the standard "enlarge image"). That simply just works once you upload the image for your product.

 

<p align="center"><a rel="shadowbox;width=320;height=240" class="option" title="Curious Cat" href="/video/cat.wmv""><img src="/images/playdemo.jpg" border="0"></a></p>

<div align="center">
 <table class="thumbs" border="0" cellspacing="0" cellpadding="0">
   <tr> 
     <td><a rel="shadowbox[MustangThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="/images/mustang/red.jpg"><img src="/images/mustang/red-thumb.jpg" alt="Red"></a></td>
     <td><a rel="shadowbox[MustangThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="/images/mustang/blue.jpg"><img src="/images/mustang/blue-thumb.jpg" alt="Red"></a></td>
     <td><a rel="shadowbox[MustangThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="/images/mustang/grey.jpg"><img src="/images/mustang/grey-thumb.jpg" alt="Red"></a></td>
   </tr>
 </table>
</div>
<p align="center"> <a rel="shadowbox" class="option" title="Click To Surf A Different Page On This Site (perhaps for product comparison?" href="http://www.visceralmagic.com/login.php">Click 
 To Surf A Different Page On This Site (perhaps for product comparison)? Click 
 Me. </a><br>
 <a rel="shadowbox" class="option" title="Perhaps you want to google something?" href="http://www.google.com/">Perhaps 
 you want to google something? Click Me.</a> </p>
<p align="center"><a rel="shadowbox" href="http://www.oscommerce.com"><img src="/images/oscthumbs.jpg" width="150" height="120" border="0" alt="How about visiting OSCommerce's Website?"></a> 
</p>
<p align="center">Or how about OSCommerce's Website? Just click the thumbnail 
 above...</p>

Link to comment
Share on other sites

Sorry guys. Just found the first major bug with my code.

 

On Windows XP: Everything is working good with the following browsers

Mozilla Firefox 2.0.0.13 (2 systems)

Internet Explorer 6.0.2 (3 systems)

 

However, it looks like there are problems with IE7 on Windows Vista (haven't tried on XP but who knows?).

Internet Explorer 7 (2 systems)

 

I do know it's a code problem, as everything works find on Michael Jackson's website. I'll try and find what the problem is and see if I can fix it......I'm no programmer. Heh. ;)

Link to comment
Share on other sites

However, it looks like there are problems with IE7 on Windows Vista (haven't tried on XP but who knows?).

 

Confirmed last night on XP. This code isn't working with IE7. I'll see what I can do about getting it working in the next day or so. But feel free to see if you can see where I've messed up yourself if you have time.

Link to comment
Share on other sites

The problem is fixed. The fix?

http://www.nabble.com/IE7-bug-(position)-td15976526.html

 

The DOCTYPE needs to be set to strict.

So the DOCTYPE for product_info.php needs to be changed to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 

Once changed, it works like a charm.

 

BUT HOLD ON!!!!!!! I am not sure how OSC will work with DOCTYPE changed??? Is this going to cause any issues? I couldn't say.

 

At any rate, I am going to do a clean install, and follow the directions from my contribution, with changed DOCTYPE and see what happens. Stay tuned. :D

Link to comment
Share on other sites

Work's like a charm on product_info.php. Doesn't seem to be any ill effects changing the DOCTYPE. Hopefully everyone else has the same results as I.

I will be updating the contribution to reflect the changes, plus a couple other optional additions to function.

 

So again, to check out what this contribution does....

http://www.visceralmagic.com/product_info.php?products_id=7

Link to comment
Share on other sites

OK. I have just uploaded the fourth revision of the Shadowbox functionality. It has the IE7 bug fix. It now includes the files for clean install so you can just replace them. Also added Shadowbox funcionality to the "Enlarge Image" in the review pages.

 

http://addons.oscommerce.com/info/5852

 

You can see the Shadowbox product_info functionality working here:

http://www.visceralmagic.com/product_info.php?products_id=7

 

You can see the review functionality here:

http://www.visceralmagic.com/product_revie...mp;reviews_id=1

 

It has been tested on IE6, IE7, FF2 on both Windows XP, and Windows Vista. No known errors.

Link to comment
Share on other sites

So has anyone been working with this contribution? What are your thoughts? I've been spending the past several days updating, etc, and just wondering if this is something I should continue with. Heh. Or if it's something that I am only interested in.

 

At any rate, 5th revision has been uploaded.

http://addons.oscommerce.com/info/5852

 

I have included an flvplayer to play your FLV files. As well, have added a usage.txt that is basically the link examples to have your SWF, FLV, WMV, MOV, Youtube, and Google Video files all come up in Shadowbox.

 

Forgot to add code example for an image. I'll do that next revision. But it's pretty basic. As we're basically just linking to ANY file, and adding the relationship to Shadowbox. Just change the filename of a video from the code provided in usage.txt, to the image, and leave out the dimentions if you want if it isn't too big.

Link to comment
Share on other sites

So has anyone been working with this contribution? What are your thoughts? I've been spending the past several days updating, etc, and just wondering if this is something I should continue with. Heh. Or if it's something that I am only interested in.

 

At any rate, 5th revision has been uploaded.

http://addons.oscommerce.com/info/5852

 

I have included an flvplayer to play your FLV files. As well, have added a usage.txt that is basically the link examples to have your SWF, FLV, WMV, MOV, Youtube, and Google Video files all come up in Shadowbox.

 

Forgot to add code example for an image. I'll do that next revision. But it's pretty basic. As we're basically just linking to ANY file, and adding the relationship to Shadowbox. Just change the filename of a video from the code provided in usage.txt, to the image, and leave out the dimentions if you want if it isn't too big.

 

 

I already replied to you in another thread but I'll add that I will try to test your code sometime today, no later than tomorrow (as I am in somewhat of a rush to see it working -and yet at work right now with no access to web apps). You can count on my feedback and any recommendations once I try it out. I'll be back! :thumbsup:

Link to comment
Share on other sites

This contrib looks great. Does anybody know if it works togheter with oscThumb ?

 

/clasf

Should work with a but of work I would imagine, but the contribution is only a few days olfd so I doubt anyonw has worked on that yet.

Link to comment
Share on other sites

Just took a quick peek at the installation files and it isn't making changes to product_info so I imagine it will work without doing anything extra besides installing both of these contributions. But you'll just have to give it a try.

Link to comment
Share on other sites

Just took a quick peek at the installation files and it isn't making changes to product_info so I imagine it will work without doing anything extra besides installing both of these contributions. But you'll just have to give it a try.

 

 

I have been using oscThumb for a long time now and tried to install Fancy Lightbox, but it does not work. The thing is that oscThumb uses a cache-directory for faster loading of files and the lightbox contrib points to another directory, or the definition for the popup-image points to the default dir.

 

Hope You understand what I mean.

 

/clasf

Link to comment
Share on other sites

I have been using oscThumb for a long time now and tried to install Fancy Lightbox, but it does not work. The thing is that oscThumb uses a cache-directory for faster loading of files and the lightbox contrib points to another directory, or the definition for the popup-image points to the default dir.

 

Hope You understand what I mean.

 

/clasf

Do you know how/where the cached image is being called with OSCthumbs? Have you tried adding a shadowbox/lightbox relationship to that href and see if that works?

Link to comment
Share on other sites

Hi peeps

I do have a small issue, when the picture is smaller than the products title not all the title can be seen and the picture looks smaller than the original once displayed, any quick fix would be much apprieated.

ps centers up lovly good work to all involved.

Edited by scorp
Link to comment
Share on other sites

Hi peeps

I do have a small issue, when the picture is smaller than the products title not all the title can be sean and the picture looks smaller than the original once displayed, any quick fix would be much apprieated.

ps centers up lovly good work to all involved.

I've noticed this with the stock images. The reason it is smaller, is that it is opening the actual file with it's actual size, and not passing any size attributes to it. You should be able to specify a size you would like:

 

rel="shadowbox;height=XXX;width=XXX" is all of your images have the same aspect ratio

or

rel="shadowbox;height=700"

or

rel="shadowbox;width=400"

 

I honestly haven't messed around with that so I am not sure if that function is going to resize the image, or just the shadowbox container instead (in which case if the picture is bigger than the box, it may induce scroll bars instead.

 

I have some running around to do this afternoon but when I get home, I'll look into solving those issues for you. Don't imagine they're too hard to figure out, even with my own limitations. Heh.

Link to comment
Share on other sites

Thx for your quick reply but it didnt seam to work here is the code for the product_info.php

 

<script language="javascript"><!--

document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="shadowbox;height=700;width=400" title="'.addslashes(addslashes($product_info['products_name'])).'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes(addslashes($product_info['products_name'])), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . addslashes(addslashes($product_info['products_name'])) . '" target="_blank" rel="shadowbox;height=700;width=400" title="'.addslashes(addslashes($product_info['products_name'])).'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

</noscript>

*/

 

I presume you did mean the product_info.php file?

changing to rel="shadowbox;height=700;width=400" didnt make any changes.

Edited by scorp
Link to comment
Share on other sites

Heh. Few minutes before me and the wife are taking off so I looked into it.

 

Yes, the height or width will stretch the image to the desired height or width. But remember that it will also shrink the larger ones. But also gives a continuity to your site that I think Shadow is perfect for. But stretching really small files (like the one you speak of, will make the image horrible as it will lose all quality.

 

As for the text, it is handled by the CSS file.

Look for shadowbox_title and change the overflow from hidden to visible.

Link to comment
Share on other sites

Changing the shadowbox_title in the .css from hidden to visible has sorted out the title of the images.

 

document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="shadowbox;height=700;width=400" title="'.addslashes($product_info['products_name']).'" >

 

Sorted opens in large now i will play about with the size so i dont get to much distortion.

 

Thanks again for all your help now to find some video..hehe

Edited by scorp
Link to comment
Share on other sites

Thx for your quick reply but it didnt seam to work here is the code for the product_info.php

 

Sorted opens in large now i will play about with the size so i dont get to much distortion.

 

Excellent. What did you do to fix the problem so we all know?

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...