Magento - Open Page as LightBox Instead in New Window or Tab

Question

I need some advice here, I googled all day but did not find anything very helpfull, just parts of code and advices around.

If you look at my demo page

DEMO PAGE

You can see offer boxes with some image and prices, if you hover over it it will show transparent window with some data, but what is important there is a button named PREGLED (that is a word in my language for VIEW).

When you click on it, it leads on this product single page.

Is there any possibility to have this "product page" opened in popup lightbox, instead of going and loading new page?

I'am really not so familiar with Magento code, but now I have opportunity to learn about. So any advice is really appreciated here.

Thank you...

UPDATE

Thank you very much i could execute code and start popup, but it is very ugly, I did not think about layout and everything else ;(. Now, I need some advices about how to make this popup a little bit more eye-catchy? If not, then I will just use ordinary new window ....

Answer 1

I got shadowbox to work for me in Magento, very similar to lightbox. This is how I did so. Simply add shadowbox to Magento by adding the core js and css files.

This answer assumes you have jQuery installed and running properly, check this link for shadowbox's jQuery requirements: https://github.com/mjijackson/shadowbox

to use internally hosted files, download latest version and place the following code in: /app/design/frontend/default/[YourTheme]/layout/local.xml

<default>
 <reference name="head">
  <action method="addItem"><type>skin_css</type><name>js/shadowbox.css</name></action>
  <action method="addItem"><type>skin_js</type><name>js/shadowbox.js</name></action>
 </reference>
</default>

place shadowbox.css and shadowbox.js in your /skin/frontend/default/[YourTheme]/js/ folder. Then you can add the attribute rel="shadowbox" to your links to open with shadowbox, such as:

<a href="http://saneldesign.com/..srcu-jadrana.html" rel="shadowbox">
 <i class="icon-eye-open icon-white"></i>
 Pregled </a>

If you wish to run shadowbox sitewide, you must initialize by adding the following code in the Admin > System > Configuration > General > Design > Footer > Miscellaneous HTML:

<script type="text/javascript"> 
Shadowbox.init();
</script>

If you get any javascript errors you may need to check for conflicts ($), prototype and make sure jQuery, especially shadowbox is running in no conflict mode. I use the following code and change $ to $j as needed within jQuery files.

var $j = jQuery.noConflict();

There are additional configuration options here: http://shadowbox-js.com/options.html

Answer 2

I would build this as a new module, with a single IndexController.php including a ajaxprodAction method inside it. After that, you need to make sure that the product view specific JS is also loaded on the page you want to load the pop-up, this is important to get any addToCart-js and such working.

The ajaxprodAction method loads the blocks showing the product info and returns them to your JS that inserts it into the pop-up. You also need to make sure to feed the product view block with the right product model object for it to know which product to show.

This stackoverflow question has more detailed information on what's needed from your module controller: Ajax in magento (load product view block)