Lightbox popups anyone using them?

[hanzoswords]

looking for a good lightbox popup code that works with 3dcart anyone have a suggestion?

[tennesseecheesecake.com]

Jquery, fancybox would work. It's free and not too hard to implement. It can popup a variety of content. Checkout our fundraising page for an example. Tennesseecheesecake.com/fundraising hover over request info then click on email info.

If you need it to work with the cart items that would take some work but I think it could be done.

[elightbox]

Thanks for the tip. Does this work on checkout pages. We use a couple of different ones but they will not function on the checkout pages.

[tennesseecheesecake.com]

Nope. You can not add any javascript to the checkout pages.

[elightbox]

Bugger! There ought to be a way, hopefully one of these days someone will figure it out and share.

[superdetail]

How would I set up a link on one of the category pages to show the content on one of the "Site Content" pages, in a lightbox/jquery popup?

Would this be possible?

[user001]

use - jQuery.noConflict()

Nope. You can not add any javascript to the checkout pages.

You can add js as long as it doesnt use the $ symbol as this is used by Prototype.

If your familiar with jQuery then you can rewrite your code to not use "$" by using "jQuery.noConflict()"
eg.
jQuery.noConflict();
jQuery(document).ready(function($){
//Your code here
});

I dont understand why 3dCart uses jQuery and Prototype, they should dump Prototype (a request I submitted) and only use jQuery.

I have successfully used jQuery on all my pages by using this method.

Hope this helps, let me know if you have any questions - ill try to help when I can.

good luck.

[elightbox]

User001, Thank you for chiming in here.
I tried this with something else, but I was not successful. May I am not doing it right.

Do I change this on the html page, or do I have to change every occurrence of $ in the js file??

[user001]

In your frame.html page you would add in the head section (AFTER your jQuery script)
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

I would then suggest putting all of your jQuery setting and scripts on its own file eg. page.js

start your new page.js file with

jQuery.noConflict();
jQuery(document).ready(function($){

and at the vary end finish it with
});

Put all of the lightbox/fancybox setting inside of your no conflict script
eg.
jQuery.noConflict();
jQuery(document).ready(function($){

//fancybox setting straight from there website Fancybox - Fancy jQuery lightbox alternative| How to use
//use whatever setting you like
/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});

});


putting everything within the no conflict "zone" you wont have to rewrite all of your code to not use $

I am not sure if the actual fancybox plugin would interfere with Prototype you might want to test it out.

Also, try changing which library you call first, this can also cause issues with Prototype
eg.
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/Prototype.js"></script>

Try calling Prototype last, I think thats how I did it.


On another note, 3dCart already has a lightbox plugin, I am not sure how you call it as I havent played with it yet and the images and iframes that I use do it automatically. Look in the quick_view.js for hints.

Let me know if you find anything.

- peace


Oh almost forgot, some templates link to protoype.js. just encase you mod a template dont add jQuery under it as the pages that use that template might not work. I like to simply link to all the scripts from the frame.html, it makes it easier to update later.

[cbsteven]

I have been playing with ColorBox the last few days (ColorBox)

I chose it because it supports JQuery 1.3 which 3DCart uses so I didn't have to worry about conflicts. You can see my implementation on my product page:
Pedalite Anklelite Solar Powered Leg Band: Black - AEBike.com - Thousands of bicycle parts and accessories - Shipped Worldwide

Note: Images in lightbox. Youtube video in lightbox.
"Instant Price Match" will either open iframe lightbox with the make_an_offer.html page loaded or send you to the login page
The testing link below that that says "Inline HTML" is my in-progress test to create a login popup so you don't have to navigate away.

[user001]

I have been playing with ColorBox the last few days (ColorBox)

I chose it because it supports JQuery 1.3 which 3DCart uses so I didn't have to worry about conflicts. You can see my implementation on my product page:
Pedalite Anklelite Solar Powered Leg Band: Black - AEBike.com - Thousands of bicycle parts and accessories - Shipped Worldwide

Note: Images in lightbox. Youtube video in lightbox.
"Instant Price Match" will either open iframe lightbox with the make_an_offer.html page loaded or send you to the login page
The testing link below that that says "Inline HTML" is my in-progress test to create a login popup so you don't have to navigate away.

Thanks for the tip, colorbox also happens to be one of my favorite lightbox plugins.

[superdetail]

I have been playing with ColorBox the last few days (ColorBox)

I chose it because it supports JQuery 1.3 which 3DCart uses so I didn't have to worry about conflicts. You can see my implementation on my product page:
Pedalite Anklelite Solar Powered Leg Band: Black - AEBike.com - Thousands of bicycle parts and accessories - Shipped Worldwide

Note: Images in lightbox. Youtube video in lightbox.
"Instant Price Match" will either open iframe lightbox with the make_an_offer.html page loaded or send you to the login page
The testing link below that that says "Inline HTML" is my in-progress test to create a login popup so you don't have to navigate away.

What is the secret to getting this to work?

I have been trying to set it up with both inline content and an external html file and it will not work.

I have the .js file installed in my template directory. The css file, and images for the example are installed, in the css template directory. They are both referenced in the frame template.

And I have a link calling the appropriate class on the page where I want the link.

What am I missing?

[cbsteven]

Do you have an example URL where you have this set up?

[superdetail]

I got it to work.

I had another instance of the reference to jquery after the reference to the colorbox javascript.

The one problem I am having is formatting in IE... it cuts off the right side of the popup.

Here is a link to the page with the implementation. I works on the links above the category filters. "About weave types", "What is GSM?", etc.