Make Lightbox Movable/Draggable

[scott_ease]

Can any Zen guru make the lightbox (http://www.zen-cart.com/downloads.php?do=file&id=170) movable so that users can read the webpage without closing the lightbox?
my url: http://angelcorp.net/zencartscottou/...products_id=49

I found an article talking about draggable lightbox (http://docs.jquery.com/UI/API/1.8/Draggable), but I have no idea how to add those codes into lightbox program.
thanks.

[scott_ease]

Plugin Draggable Modal Image with Zoom can be used to solve the question. The plugin combines: Modal Image, Draggable Element, Image Zoom, and Tabs code. All from w3schools. Demo is available at https://shop.angelcorp.net/index.php...products_id=99

I combined those codes to solve this question I posted years ago. It may surprise you that I'm not an IT person. I'm a CPA from California. As a result,
1. I'm not able to provide any technical support. Anybody can step in to improve and/or expand the function of this plugin.
2. If your major is not computer science, don't be frustrated. You can build beautiful website as long as you devote time and energy. I initially started learning code right here at Zen Cart forum.

Following improvements are warmly welcomed:
1. Expand the function of this plugin to cover additional images, like I did with https://cn.angelcorp.net/shop/goods.php?id=9. I have difficulty to make it work with Zen Cart.
2. The Tabs code from w3schools is very lightweight, so I used it on https://angelcorp.net/organic-formul...products_id=87. But on demo page, I had to use Tabbed Products plugin, because I cannot put Customer Reviews under a tab when using Tabs code from w3schools. Additional codes are required but I don't know how.

[kernheimer]

WOW! thanks! certainly going to try this out!

[kernheimer]

Hey Scott, can you please help me a little. 'm facing a green box in the zoomed area and can't find where to change it what css sheet ii need to use!
thanks
Eugénie

[scott_ease]

Please go to file: /includes/templates/Your-Template/jscript/jscript_zoom_modal_tab.js
and see Line 59: document.getElementById('myresult').style.border = "1px solid #65AC94";

I think that's what you are looking for.

[kernheimer]

hahahahaha, totaly overlooked it.
can easy say works like a charm! thanks Scott,
Eugenie

Please go to file: /includes/templates/Your-Template/jscript/jscript_zoom_modal_tab.js
and see Line 59: document.getElementById('myresult').style.border = "1px solid #65AC94";

I think that's what you are looking for.

[dbltoe]

Actually, that should be corrected in the stylesheet_zoom_modal_tab.css on line 13 IF you have that file with your template.

To find your changes during the next upgrade, you can create includes/templates/YOUR_TEMPLATE/css/stylesheet_zcustom.css and add

.modal { 
  width: 475px;
  height: 529px;
  background-color: #fff;
  border: 10px solid #65AC94;
}
.modal-content {
border-bottom: 8px solid #65AC94;
}

This will control most anything you want to do with the pop-up. Change the colors as needed. Those above are used in the example.

The .modal background controls both the upper- and lower-portions of the pop-up. .modal-content controls the bottom of the image NOT the whole pop-up. Interesting usage.