Home/ Questions/Q 8419333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T02:34:48+00:00

I am working on editing a template where I need to add a Lightbox

  • 0

I am working on editing a template where I need to add a Lightbox that shows up some HTML content on product pages. Precisely, instead of “Add to Cart” button there will be a Button that pops over some inline lightbox content.

All the lightbox alternatives I’ve looked at, require me to inherit jQuery using CDN. Like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

And the template I am using is using a bunch of custom scripts in head.phtml & other pages.
Like:

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/ver_menu.js');?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/custommenu.js');?>"></script>

So, when I add this line in head.phtml or even the product page, My Top Menu stops dropping down & The product information tabs stop working and all the information is displayed right on my product page (instead of appearing under their respective tabs).

Is there a way I can avoid this interference between the jQuery scripts to make the lightbox (on product page – view.phtml) work and not have my menu & information tabs affected.

Been struggling with this for a while and the theme authors aren’t willing to help either.

I have already tried to play around with the placement of the jQuery Line I posted above, but no luck. Any way I can use the magento’s core jQuery script to make my lightbox work…

Also, I am using colorbox for the lightbox effect. (http://www.jacklmoore.com/colorbox)

I can’t do much but I can offer a dinner & a beer on me to whoever can help me get this resolved. Really counting on you guys…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i do this on this way i added this code in /templatefiolder/page/html/head.phtml:

     <!-- adding jQuery -->
<script type="text/javascript" src="http://linktoJquery/jquery.tools.min.js"></script>

<script type="text/javascript">
//<![CDATA[
     var $j = jQuery.noConflict();
//]]>
</script>

    I added this $j because of conflicts with prototype. In this case you always have to do jQuerythings like this:

    <script>
// execute your scripts when DOM is ready. this is a good habit
$j(function() {     

    $j(".scrollable").scrollable();

});
</script>
    • 0