looking for a good lightbox popup code that works with 3dcart anyone have a suggestion?
Announcement
Collapse
No announcement yet.
Lightbox popups anyone using them?
Collapse
X
-
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.
-
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?Last edited by superdetail; 04-30-2012, 01:51 AM.
Comment
-
use - jQuery.noConflict()
Originally posted by tennesseecheesecake.com View PostNope. You can not add any javascript to the checkout pages.
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.
Comment
-
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.Last edited by user001; 05-18-2012, 05:36 PM.
Comment
-
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.
Comment
-
Originally posted by cbsteven View PostI 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.
Comment
-
Originally posted by cbsteven View PostI 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.
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?
Comment
-
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.
Comment
Comment