Version Notes
Small updates
Download this release
Release Info
| Developer | Magento Core Team |
| Extension | Magmodules_Colorbox |
| Version | 1.1.5 |
| Comparing to | |
| See all releases | |
Code changes from version 1.1.0.0 to 1.1.5
- app/code/local/Magmodules/Colorbox/etc/config.xml +3 -3
- app/code/local/Magmodules/Core/Block/Adminhtml/System/Config/Form/Field/Heading.php +23 -0
- app/code/local/Magmodules/Core/etc/config.xml +7 -0
- app/design/frontend/base/default/layout/magmodules/colorbox/colorbox.xml +0 -8
- app/design/frontend/base/default/template/magmodules/colorbox/media.phtml +25 -21
- app/locale/nl_NL/Magmodules_Colorbox.csv +3 -0
- package.xml +6 -6
- skin/adminhtml/default/default/images/magmodules/logo-small.png +0 -0
- skin/adminhtml/default/default/images/magmodules/logo.png +0 -0
- skin/adminhtml/default/default/magmodules.css +5 -4
- skin/frontend/base/default/magmodules/colorbox/jquery.colorbox-min.js +7 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/colorbox.css +34 -62
- skin/frontend/base/default/magmodules/colorbox/theme1/images/border.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/controls.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderBottomCenter.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderBottomLeft.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderBottomRight.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderMiddleLeft.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderMiddleRight.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderTopCenter.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderTopLeft.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderTopRight.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/images/loading_background.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme1/index.html +95 -0
- skin/frontend/base/default/magmodules/colorbox/theme2/colorbox.css +46 -23
- skin/frontend/base/default/magmodules/colorbox/{theme4 → theme2}/images/border1.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/{theme4 → theme2}/images/border2.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme2/images/loading.gif +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme2/index.html +95 -0
- skin/frontend/base/default/magmodules/colorbox/theme3/colorbox.css +16 -9
- skin/frontend/base/default/magmodules/colorbox/theme3/index.html +95 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/colorbox.css +28 -60
- skin/frontend/base/default/magmodules/colorbox/{theme2 → theme4}/images/controls.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderBottomCenter.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderBottomLeft.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderBottomRight.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderMiddleLeft.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderMiddleRight.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderTopCenter.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderTopLeft.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderTopRight.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/images/loading.gif +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme4/index.html +95 -0
- skin/frontend/base/default/magmodules/colorbox/theme5/colorbox.css +47 -29
- skin/frontend/base/default/magmodules/colorbox/theme5/images/border.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme5/images/controls.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme5/images/loading_background.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/{theme1 → theme5}/images/overlay.png +0 -0
- skin/frontend/base/default/magmodules/colorbox/theme5/index.html +95 -0
app/code/local/Magmodules/Colorbox/etc/config.xml
CHANGED
|
@@ -24,14 +24,14 @@
|
|
| 24 |
<config>
|
| 25 |
<modules>
|
| 26 |
<Magmodules_Colorbox>
|
| 27 |
-
<version>1.1.
|
| 28 |
</Magmodules_Colorbox>
|
| 29 |
</modules>
|
| 30 |
<frontend>
|
| 31 |
<layout>
|
| 32 |
<updates>
|
| 33 |
<magmodules_colorbox>
|
| 34 |
-
<file>
|
| 35 |
</magmodules_colorbox>
|
| 36 |
</updates>
|
| 37 |
</layout>
|
|
@@ -82,7 +82,7 @@
|
|
| 82 |
<jquery>google</jquery>
|
| 83 |
</settings>
|
| 84 |
<theme>
|
| 85 |
-
<theme>
|
| 86 |
<transition>none</transition>
|
| 87 |
<transition_speed>250</transition_speed>
|
| 88 |
</theme>
|
| 24 |
<config>
|
| 25 |
<modules>
|
| 26 |
<Magmodules_Colorbox>
|
| 27 |
+
<version>1.1.5</version>
|
| 28 |
</Magmodules_Colorbox>
|
| 29 |
</modules>
|
| 30 |
<frontend>
|
| 31 |
<layout>
|
| 32 |
<updates>
|
| 33 |
<magmodules_colorbox>
|
| 34 |
+
<file>magmodules_colorbox.xml</file>
|
| 35 |
</magmodules_colorbox>
|
| 36 |
</updates>
|
| 37 |
</layout>
|
| 82 |
<jquery>google</jquery>
|
| 83 |
</settings>
|
| 84 |
<theme>
|
| 85 |
+
<theme>theme5</theme>
|
| 86 |
<transition>none</transition>
|
| 87 |
<transition_speed>250</transition_speed>
|
| 88 |
</theme>
|
app/code/local/Magmodules/Core/Block/Adminhtml/System/Config/Form/Field/Heading.php
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<?php
|
| 2 |
+
/**
|
| 3 |
+
* Magmodules.eu
|
| 4 |
+
* Http://www.magmodules.eu
|
| 5 |
+
* ========================
|
| 6 |
+
* @category Magmodules
|
| 7 |
+
* @package Magmodules_Core
|
| 8 |
+
* @author Magmodules <info@magmodules.eu)
|
| 9 |
+
* @copyright Copyright (c) 2013 (http://www.magmodules.eu)
|
| 10 |
+
* @license http://www.magmodules.eu/license-agreement/ [ Single domain license ]
|
| 11 |
+
*/
|
| 12 |
+
|
| 13 |
+
class Magmodules_Core_Block_Adminhtml_System_Config_Form_Field_Heading extends Mage_Adminhtml_Block_Abstract implements Varien_Data_Form_Element_Renderer_Interface
|
| 14 |
+
{
|
| 15 |
+
|
| 16 |
+
public function render(Varien_Data_Form_Element_Abstract $element)
|
| 17 |
+
{
|
| 18 |
+
$useContainerId = $element->getData('use_container_id');
|
| 19 |
+
return sprintf('<tr class="system-fieldset-sub-head" id="row_%s"><td colspan="5"><h4>%s</h4></td></tr>',
|
| 20 |
+
$element->getHtmlId(), $element->getLabel()
|
| 21 |
+
);
|
| 22 |
+
}
|
| 23 |
+
}
|
app/code/local/Magmodules/Core/etc/config.xml
CHANGED
|
@@ -17,6 +17,13 @@
|
|
| 17 |
<version>1.0.0</version>
|
| 18 |
</Magmodules_Core>
|
| 19 |
</modules>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
<adminhtml>
|
| 21 |
<layout>
|
| 22 |
<updates>
|
| 17 |
<version>1.0.0</version>
|
| 18 |
</Magmodules_Core>
|
| 19 |
</modules>
|
| 20 |
+
<global>
|
| 21 |
+
<blocks>
|
| 22 |
+
<magmodules_core>
|
| 23 |
+
<class>Magmodules_Core_Block_Adminhtml</class>
|
| 24 |
+
</magmodules_core>
|
| 25 |
+
</blocks>
|
| 26 |
+
</global>
|
| 27 |
<adminhtml>
|
| 28 |
<layout>
|
| 29 |
<updates>
|
app/design/frontend/base/default/layout/magmodules/colorbox/colorbox.xml
DELETED
|
@@ -1,8 +0,0 @@
|
|
| 1 |
-
<?xml version="1.0"?>
|
| 2 |
-
<layout version="0.1.0">
|
| 3 |
-
<catalog_product_view>
|
| 4 |
-
<reference name="product.info.media">
|
| 5 |
-
<action method="setTemplate" ifconfig="colorbox/settings/enable"><template>magmodules/colorbox/media.phtml</template></action>
|
| 6 |
-
</reference>
|
| 7 |
-
</catalog_product_view>
|
| 8 |
-
</layout>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
app/design/frontend/base/default/template/magmodules/colorbox/media.phtml
CHANGED
|
@@ -23,6 +23,11 @@
|
|
| 23 |
$_product = $this->getProduct();
|
| 24 |
$_helper = $this->helper('catalog/output');
|
| 25 |
$colorbox = Mage::helper('colorbox');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 26 |
?>
|
| 27 |
|
| 28 |
<?php if(Mage::getStoreConfig('colorbox/settings/jquery') == 'google'): ?>
|
|
@@ -33,7 +38,7 @@
|
|
| 33 |
<script src="<?php echo $this->getSkinUrl('magmodules/colorbox/jquery.min.js'); ?>"></script>
|
| 34 |
<?php endif; ?>
|
| 35 |
|
| 36 |
-
<script src="<?php echo $this->getSkinUrl('magmodules/colorbox/jquery.colorbox.js'); ?>" type="text/javascript"></script>
|
| 37 |
<link rel="stylesheet" href="<?php echo $this->getSkinUrl('magmodules/colorbox/'. Mage::getStoreConfig('colorbox/theme/theme') .'/colorbox.css'); ?>" type="text/css" media="screen" />
|
| 38 |
<script>
|
| 39 |
jQuery.noConflict();
|
|
@@ -51,29 +56,28 @@
|
|
| 51 |
);
|
| 52 |
});
|
| 53 |
</script>
|
| 54 |
-
|
| 55 |
<p class="product-image">
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
</p>
|
| 63 |
|
| 64 |
<?php if (count($this->getGalleryImages()) > 0): ?>
|
| 65 |
<div class="more-views">
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
</div>
|
| 78 |
-
<?php endif; ?>
|
| 79 |
-
|
| 23 |
$_product = $this->getProduct();
|
| 24 |
$_helper = $this->helper('catalog/output');
|
| 25 |
$colorbox = Mage::helper('colorbox');
|
| 26 |
+
|
| 27 |
+
// Sizes
|
| 28 |
+
$popupsize = explode(',', $colorbox->getPopupSize());
|
| 29 |
+
$mainsize = explode(',', $colorbox->getMainSize());
|
| 30 |
+
$thumbsize = explode(',', $colorbox->getThumbSize());
|
| 31 |
?>
|
| 32 |
|
| 33 |
<?php if(Mage::getStoreConfig('colorbox/settings/jquery') == 'google'): ?>
|
| 38 |
<script src="<?php echo $this->getSkinUrl('magmodules/colorbox/jquery.min.js'); ?>"></script>
|
| 39 |
<?php endif; ?>
|
| 40 |
|
| 41 |
+
<script src="<?php echo $this->getSkinUrl('magmodules/colorbox/jquery.colorbox-min.js'); ?>" type="text/javascript"></script>
|
| 42 |
<link rel="stylesheet" href="<?php echo $this->getSkinUrl('magmodules/colorbox/'. Mage::getStoreConfig('colorbox/theme/theme') .'/colorbox.css'); ?>" type="text/css" media="screen" />
|
| 43 |
<script>
|
| 44 |
jQuery.noConflict();
|
| 56 |
);
|
| 57 |
});
|
| 58 |
</script>
|
| 59 |
+
|
| 60 |
<p class="product-image">
|
| 61 |
+
<a id="productimagemain" class="colorbox" href="<?php echo $this->helper('catalog/image')->init($_product, 'image')->keepFrame(false)->resize($popupsize[0],$popupsize[1]); ?>">
|
| 62 |
+
<?php
|
| 63 |
+
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->keepFrame(false)->resize($mainsize[0],$mainsize[1]).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
|
| 64 |
+
echo $_helper->productAttribute($_product, $_img, 'image');
|
| 65 |
+
?>
|
| 66 |
+
</a>
|
| 67 |
</p>
|
| 68 |
|
| 69 |
<?php if (count($this->getGalleryImages()) > 0): ?>
|
| 70 |
<div class="more-views">
|
| 71 |
+
<h2><?php echo $this->__('More Views') ?></h2>
|
| 72 |
+
<ul>
|
| 73 |
+
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
|
| 74 |
+
<li>
|
| 75 |
+
<a class="colorbox" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->keepFrame(false)->resize($popupsize[0],$popupsize[1]); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>">
|
| 76 |
+
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->keepFrame(false)->resize($thumbsize[0],$thumbsize[1]); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
|
| 77 |
+
</a>
|
| 78 |
+
</li>
|
| 79 |
+
<?php $i++ ?>
|
| 80 |
+
<?php endforeach; ?>
|
| 81 |
+
</ul>
|
| 82 |
</div>
|
| 83 |
+
<?php endif; ?>
|
|
|
app/locale/nl_NL/Magmodules_Colorbox.csv
CHANGED
|
@@ -4,6 +4,9 @@
|
|
| 4 |
"close","Sluiten"
|
| 5 |
"Include jQuery","Activeer jQuery"
|
| 6 |
"Select jQuery include type","Selecteer soort JQuery"
|
|
|
|
|
|
|
|
|
|
| 7 |
"Colorbox theme","Colorbox thema"
|
| 8 |
"Select a theme","Selecteer een thema"
|
| 9 |
"Size of main image","Afmeting van hoofd afbeelding"
|
| 4 |
"close","Sluiten"
|
| 5 |
"Include jQuery","Activeer jQuery"
|
| 6 |
"Select jQuery include type","Selecteer soort JQuery"
|
| 7 |
+
"Transition","Omschakeling"
|
| 8 |
+
"Transition speed", Omschakeling snelheid"
|
| 9 |
+
"Image size", "Afbeelding afmeting"
|
| 10 |
"Colorbox theme","Colorbox thema"
|
| 11 |
"Select a theme","Selecteer een thema"
|
| 12 |
"Size of main image","Afmeting van hoofd afbeelding"
|
package.xml
CHANGED
|
@@ -1,18 +1,18 @@
|
|
| 1 |
<?xml version="1.0"?>
|
| 2 |
<package>
|
| 3 |
<name>Magmodules_Colorbox</name>
|
| 4 |
-
<version>1.1.
|
| 5 |
<stability>stable</stability>
|
| 6 |
-
<license
|
| 7 |
<channel>community</channel>
|
| 8 |
<extends/>
|
| 9 |
<summary>Colorbox plugin for Magento</summary>
|
| 10 |
<description>Colorbox is A lightweight customizable lightbox plugin for jQuery now compatible with Magento.</description>
|
| 11 |
-
<notes>
|
| 12 |
<authors><author><name>Magmodules</name><user>auto-converted</user><email>info@magmodules.eu</email></author></authors>
|
| 13 |
-
<date>2013-
|
| 14 |
-
<time>
|
| 15 |
-
<contents><target name="magelocal"><dir name="Magmodules"><dir name="Colorbox"><dir name="Helper"><file name="Data.php" hash="22e20d9c8d4eaec58ac77bf2bcdfbd73"/></dir><dir name="Model"><dir name="System"><dir name="Config"><dir name="Source"><file name="Jquery.php" hash="e28250acc21299a6063b770ecf98a687"/><file name="Theme.php" hash="c62b1726a88d8ff75f2e88e17c486e39"/><file name="Transition.php" hash="f5de9d1c0e4707b4dc58ad4eb2bffd18"/></dir></dir></dir></dir><dir name="etc"><file name="adminhtml.xml" hash="76afc684cdb8ca435b2b8e7b296cc81c"/><file name="config.xml" hash="
|
| 16 |
<compatible/>
|
| 17 |
<dependencies/>
|
| 18 |
</package>
|
| 1 |
<?xml version="1.0"?>
|
| 2 |
<package>
|
| 3 |
<name>Magmodules_Colorbox</name>
|
| 4 |
+
<version>1.1.5</version>
|
| 5 |
<stability>stable</stability>
|
| 6 |
+
<license/>
|
| 7 |
<channel>community</channel>
|
| 8 |
<extends/>
|
| 9 |
<summary>Colorbox plugin for Magento</summary>
|
| 10 |
<description>Colorbox is A lightweight customizable lightbox plugin for jQuery now compatible with Magento.</description>
|
| 11 |
+
<notes>Small updates</notes>
|
| 12 |
<authors><author><name>Magmodules</name><user>auto-converted</user><email>info@magmodules.eu</email></author></authors>
|
| 13 |
+
<date>2013-12-23</date>
|
| 14 |
+
<time>14:07:34</time>
|
| 15 |
+
<contents><target name="magelocal"><dir name="Magmodules"><dir name="Colorbox"><dir name="Helper"><file name="Data.php" hash="22e20d9c8d4eaec58ac77bf2bcdfbd73"/></dir><dir name="Model"><dir name="System"><dir name="Config"><dir name="Source"><file name="Jquery.php" hash="e28250acc21299a6063b770ecf98a687"/><file name="Theme.php" hash="c62b1726a88d8ff75f2e88e17c486e39"/><file name="Transition.php" hash="f5de9d1c0e4707b4dc58ad4eb2bffd18"/></dir></dir></dir></dir><dir name="etc"><file name="adminhtml.xml" hash="76afc684cdb8ca435b2b8e7b296cc81c"/><file name="config.xml" hash="555f1531c97b6df6dfc771f7142ad8b7"/><file name="system.xml" hash="28e33f1cdd7fd6129ed9ecb2d288c8ab"/></dir></dir><dir name="Core"><dir name="Block"><dir name="Adminhtml"><dir name="System"><dir name="Config"><dir name="Form"><dir name="Field"><file name="Heading.php" hash="225f6b0c38c0416999bca84ed585f8a0"/></dir></dir></dir></dir></dir></dir><dir name="etc"><file name="config.xml" hash="00d42a8d48f8990f6df2baf5e35227cc"/><file name="system.xml" hash="a6af45002ccaf73cca5bdff49704d100"/></dir></dir></dir></target><target name="magedesign"><dir name="adminhtml"><dir name="default"><dir name="default"><dir name="layout"><dir name="magmodules"><file name="core.xml" hash="b0eac6eb7b32ce3ddd9eda265aeff861"/></dir></dir></dir></dir></dir><dir name="frontend"><dir name="base"><dir name="default"><dir name="template"><dir name="magmodules"><dir name="colorbox"><file name="media.phtml" hash="a748ba109f3d27b6575f073e0dfe64c3"/></dir></dir></dir></dir></dir></dir></target><target name="mageskin"><dir name="adminhtml"><dir name="default"><dir name="default"><dir name="images"><dir name="magmodules"><file name="comments.png" hash="f187231e161acd185dbb918c8d9b7b6d"/><file name="logo-small.png" hash="b7f5334665d500cd6068a0ce55cd6d74"/></dir></dir><file name="magmodules.css" hash="7cd6b3eca521f94eba537d89e772fc9c"/></dir></dir></dir><dir name="frontend"><dir name="base"><dir name="default"><dir name="magmodules"><dir name="colorbox"><dir name="theme1"><dir name="images"><file name="border.png" hash="84ac39cb765f507aa1aef0f657c5e4bf"/><file name="controls.png" hash="5aec7ed684b6fe4dbeffabb73378962c"/><file name="loading.gif" hash="e6611f867d63754b7a2a974fb0a0e7dc"/><file name="loading_background.png" hash="7c96a54b079f79d48db5c29c3a538b83"/></dir><file name="colorbox.css" hash="35425d708ab8c0fcf3c167988714af42"/><file name="index.html" hash="5bdd54efda443a2795804de8d6f627b0"/></dir><dir name="theme2"><dir name="images"><file name="border1.png" hash="416e964cc063395fc2db26e463987609"/><file name="border2.png" hash="50cdcf6bc41aeac05c43095f4074f6f4"/><file name="loading.gif" hash="b5e24db8f84eb4eac09c88f804f36df2"/></dir><file name="colorbox.css" hash="8a1bc865bf21844aca00f57e7a27640b"/><file name="index.html" hash="5bdd54efda443a2795804de8d6f627b0"/></dir><dir name="theme3"><dir name="images"><file name="controls.png" hash="26156c32573f430fc4454fb551ac67f2"/><file name="loading.gif" hash="8732a6660b528fadfaeb35bcf568875f"/></dir><file name="colorbox.css" hash="33dd1a490962059235c1fc0bc7a3de73"/><file name="index.html" hash="5bdd54efda443a2795804de8d6f627b0"/></dir><dir name="theme4"><dir name="images"><file name="controls.png" hash="e9bdd308d0c5978e837e5aba1c5712d6"/><file name="loading.gif" hash="8732a6660b528fadfaeb35bcf568875f"/></dir><file name="colorbox.css" hash="03e7999994069b3e2282485ebe23e645"/><file name="index.html" hash="5bdd54efda443a2795804de8d6f627b0"/></dir><dir name="theme5"><dir name="images"><file name="border.png" hash="7ca8a1d2eb0763b35c266cd54bee2fa5"/><file name="controls.png" hash="b68b9ecaae424de4862ba0d055b7a560"/><file name="loading.gif" hash="e6611f867d63754b7a2a974fb0a0e7dc"/><file name="loading_background.png" hash="acf427e932fb9413700a4b8b58b41eec"/><file name="overlay.png" hash="790376e15a036959e358a19d4a7ea437"/></dir><file name="colorbox.css" hash="75d3a3c08e145bbd05503b8565ee1d20"/><file name="index.html" hash="5bdd54efda443a2795804de8d6f627b0"/></dir><file name="jquery.colorbox-min.js" hash="2c381fee3e12193d17c2ed14d2cbcffa"/><file name="jquery.colorbox.js" hash="5f6f6fb1da2f569029c97b3832c3fa78"/><file name="jquery.min.js" hash="ddb84c1587287b2df08966081ef063bf"/></dir></dir></dir></dir></dir></target><target name="magelocale"><dir name="en_US"><file name="Magmodules_Colorbox.csv" hash="9d21673a078feded5a1c05a5ef489515"/></dir><dir name="nl_NL"><file name="Magmodules_Colorbox.csv" hash="1b2dd42a0246db0423448436477d4523"/></dir></target><target name="mageetc"><dir name="modules"><file name="Magmodules_Colorbox.xml" hash="7972ddfcb81e4f67894ab903edfbb13f"/><file name="Magmodules_Core.xml" hash="2697672510696f9cc390b995103c89c7"/></dir></target></contents>
|
| 16 |
<compatible/>
|
| 17 |
<dependencies/>
|
| 18 |
</package>
|
skin/adminhtml/default/default/images/magmodules/logo-small.png
ADDED
|
Binary file
|
skin/adminhtml/default/default/images/magmodules/logo.png
DELETED
|
Binary file
|
skin/adminhtml/default/default/magmodules.css
CHANGED
|
@@ -14,16 +14,17 @@
|
|
| 14 |
*
|
| 15 |
* @category Magmodules
|
| 16 |
* @package Magmodules_Core
|
| 17 |
-
* @author Magmodules <info@magmodules.eu
|
| 18 |
* @copyright Copyright (c) 2013 (http://www.magmodules.eu)
|
| 19 |
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
|
| 20 |
*/
|
| 21 |
|
| 22 |
h3.mm-moduleheader {
|
| 23 |
-
background: url("images/magmodules/logo.png") no-repeat scroll 4px 0 transparent;
|
| 24 |
padding: 18px 0 2px 160px;
|
| 25 |
-
height:
|
| 26 |
-
|
|
|
|
| 27 |
}
|
| 28 |
|
| 29 |
p.mm-info {
|
| 14 |
*
|
| 15 |
* @category Magmodules
|
| 16 |
* @package Magmodules_Core
|
| 17 |
+
* @author Magmodules <info@magmodules.eu>
|
| 18 |
* @copyright Copyright (c) 2013 (http://www.magmodules.eu)
|
| 19 |
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
|
| 20 |
*/
|
| 21 |
|
| 22 |
h3.mm-moduleheader {
|
| 23 |
+
background: url("images/magmodules/logo-small.png") no-repeat scroll 4px 0 transparent;
|
| 24 |
padding: 18px 0 2px 160px;
|
| 25 |
+
height: 20px;
|
| 26 |
+
font-size: 16px;
|
| 27 |
+
color: #6C6C6C;
|
| 28 |
}
|
| 29 |
|
| 30 |
p.mm-info {
|
skin/frontend/base/default/magmodules/colorbox/jquery.colorbox-min.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/*!
|
| 2 |
+
Colorbox v1.4.33 - 2013-10-31
|
| 3 |
+
jQuery lightbox and modal window plugin
|
| 4 |
+
(c) 2013 Jack Moore - http://www.jacklmoore.com/colorbox
|
| 5 |
+
license: http://www.opensource.org/licenses/mit-license.php
|
| 6 |
+
*/
|
| 7 |
+
(function(e,t,i){function o(i,o,n){var r=t.createElement(i);return o&&(r.id=Z+o),n&&(r.style.cssText=n),e(r)}function n(){return i.innerHeight?i.innerHeight:e(i).height()}function r(e){var t=k.length,i=(z+e)%t;return 0>i?t+i:i}function h(e,t){return Math.round((/%/.test(e)?("x"===t?E.width():n())/100:1)*parseInt(e,10))}function l(e,t){return e.photo||e.photoRegex.test(t)}function s(e,t){return e.retinaUrl&&i.devicePixelRatio>1?t.replace(e.photoRegex,e.retinaSuffix):t}function a(e){"contains"in g[0]&&!g[0].contains(e.target)&&(e.stopPropagation(),g.focus())}function d(){var t,i=e.data(N,Y);null==i?(B=e.extend({},X),console&&console.log&&console.log("Error: cboxElement missing settings object")):B=e.extend({},i);for(t in B)e.isFunction(B[t])&&"on"!==t.slice(0,2)&&(B[t]=B[t].call(N));B.rel=B.rel||N.rel||e(N).data("rel")||"nofollow",B.href=B.href||e(N).attr("href"),B.title=B.title||N.title,"string"==typeof B.href&&(B.href=e.trim(B.href))}function c(i,o){e(t).trigger(i),lt.triggerHandler(i),e.isFunction(o)&&o.call(N)}function u(i){q||(N=i,d(),k=e(N),z=0,"nofollow"!==B.rel&&(k=e("."+et).filter(function(){var t,i=e.data(this,Y);return i&&(t=e(this).data("rel")||i.rel||this.rel),t===B.rel}),z=k.index(N),-1===z&&(k=k.add(N),z=k.length-1)),w.css({opacity:parseFloat(B.opacity),cursor:B.overlayClose?"pointer":"auto",visibility:"visible"}).show(),J&&g.add(w).removeClass(J),B.className&&g.add(w).addClass(B.className),J=B.className,B.closeButton?K.html(B.close).appendTo(y):K.appendTo("<div/>"),U||(U=$=!0,g.css({visibility:"hidden",display:"block"}),H=o(st,"LoadedContent","width:0; height:0; overflow:hidden"),y.css({width:"",height:""}).append(H),O=x.height()+C.height()+y.outerHeight(!0)-y.height(),_=b.width()+T.width()+y.outerWidth(!0)-y.width(),D=H.outerHeight(!0),A=H.outerWidth(!0),B.w=h(B.initialWidth,"x"),B.h=h(B.initialHeight,"y"),H.css({width:"",height:B.h}),Q.position(),c(tt,B.onOpen),P.add(L).hide(),g.focus(),B.trapFocus&&t.addEventListener&&(t.addEventListener("focus",a,!0),lt.one(rt,function(){t.removeEventListener("focus",a,!0)})),B.returnFocus&<.one(rt,function(){e(N).focus()})),m())}function f(){!g&&t.body&&(V=!1,E=e(i),g=o(st).attr({id:Y,"class":e.support.opacity===!1?Z+"IE":"",role:"dialog",tabindex:"-1"}).hide(),w=o(st,"Overlay").hide(),F=e([o(st,"LoadingOverlay")[0],o(st,"LoadingGraphic")[0]]),v=o(st,"Wrapper"),y=o(st,"Content").append(L=o(st,"Title"),S=o(st,"Current"),I=e('<button type="button"/>').attr({id:Z+"Previous"}),R=e('<button type="button"/>').attr({id:Z+"Next"}),M=o("button","Slideshow"),F),K=e('<button type="button"/>').attr({id:Z+"Close"}),v.append(o(st).append(o(st,"TopLeft"),x=o(st,"TopCenter"),o(st,"TopRight")),o(st,!1,"clear:left").append(b=o(st,"MiddleLeft"),y,T=o(st,"MiddleRight")),o(st,!1,"clear:left").append(o(st,"BottomLeft"),C=o(st,"BottomCenter"),o(st,"BottomRight"))).find("div div").css({"float":"left"}),W=o(st,!1,"position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;"),P=R.add(I).add(S).add(M),e(t.body).append(w,g.append(v,W)))}function p(){function i(e){e.which>1||e.shiftKey||e.altKey||e.metaKey||e.ctrlKey||(e.preventDefault(),u(this))}return g?(V||(V=!0,R.click(function(){Q.next()}),I.click(function(){Q.prev()}),K.click(function(){Q.close()}),w.click(function(){B.overlayClose&&Q.close()}),e(t).bind("keydown."+Z,function(e){var t=e.keyCode;U&&B.escKey&&27===t&&(e.preventDefault(),Q.close()),U&&B.arrowKey&&k[1]&&!e.altKey&&(37===t?(e.preventDefault(),I.click()):39===t&&(e.preventDefault(),R.click()))}),e.isFunction(e.fn.on)?e(t).on("click."+Z,"."+et,i):e("."+et).live("click."+Z,i)),!0):!1}function m(){var n,r,a,u=Q.prep,f=++at;$=!0,j=!1,N=k[z],d(),c(ht),c(it,B.onLoad),B.h=B.height?h(B.height,"y")-D-O:B.innerHeight&&h(B.innerHeight,"y"),B.w=B.width?h(B.width,"x")-A-_:B.innerWidth&&h(B.innerWidth,"x"),B.mw=B.w,B.mh=B.h,B.maxWidth&&(B.mw=h(B.maxWidth,"x")-A-_,B.mw=B.w&&B.w<B.mw?B.w:B.mw),B.maxHeight&&(B.mh=h(B.maxHeight,"y")-D-O,B.mh=B.h&&B.h<B.mh?B.h:B.mh),n=B.href,G=setTimeout(function(){F.show()},100),B.inline?(a=o(st).hide().insertBefore(e(n)[0]),lt.one(ht,function(){a.replaceWith(H.children())}),u(e(n))):B.iframe?u(" "):B.html?u(B.html):l(B,n)?(n=s(B,n),j=t.createElement("img"),e(j).addClass(Z+"Photo").bind("error",function(){B.title=!1,u(o(st,"Error").html(B.imgError))}).one("load",function(){var t;f===at&&(e.each(["alt","longdesc","aria-describedby"],function(t,i){var o=e(N).attr(i)||e(N).attr("data-"+i);o&&j.setAttribute(i,o)}),B.retinaImage&&i.devicePixelRatio>1&&(j.height=j.height/i.devicePixelRatio,j.width=j.width/i.devicePixelRatio),B.scalePhotos&&(r=function(){j.height-=j.height*t,j.width-=j.width*t},B.mw&&j.width>B.mw&&(t=(j.width-B.mw)/j.width,r()),B.mh&&j.height>B.mh&&(t=(j.height-B.mh)/j.height,r())),B.h&&(j.style.marginTop=Math.max(B.mh-j.height,0)/2+"px"),k[1]&&(B.loop||k[z+1])&&(j.style.cursor="pointer",j.onclick=function(){Q.next()}),j.style.width=j.width+"px",j.style.height=j.height+"px",setTimeout(function(){u(j)},1))}),setTimeout(function(){j.src=n},1)):n&&W.load(n,B.data,function(t,i){f===at&&u("error"===i?o(st,"Error").html(B.xhrError):e(this).contents())})}var w,g,v,y,x,b,T,C,k,E,H,W,F,L,S,M,R,I,K,P,B,O,_,D,A,N,z,j,U,$,q,G,Q,J,V,X={html:!1,photo:!1,iframe:!1,inline:!1,transition:"elastic",speed:300,fadeOut:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,href:!1,title:!1,rel:!1,opacity:.9,preloading:!0,className:!1,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1,data:void 0,closeButton:!0,fastIframe:!0,open:!1,reposition:!0,loop:!0,slideshow:!1,slideshowAuto:!0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",photoRegex:/\.(gif|png|jp(e|g|eg)|bmp|ico|webp)((#|\?).*)?$/i,retinaImage:!1,retinaUrl:!1,retinaSuffix:"@2x.$1",current:"image {current} of {total}",previous:"previous",next:"next",close:"close",xhrError:"This content failed to load.",imgError:"This image failed to load.",returnFocus:!0,trapFocus:!0,onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1},Y="colorbox",Z="cbox",et=Z+"Element",tt=Z+"_open",it=Z+"_load",ot=Z+"_complete",nt=Z+"_cleanup",rt=Z+"_closed",ht=Z+"_purge",lt=e("<a/>"),st="div",at=0,dt={},ct=function(){function e(){clearTimeout(h)}function t(){(B.loop||k[z+1])&&(e(),h=setTimeout(Q.next,B.slideshowSpeed))}function i(){M.html(B.slideshowStop).unbind(s).one(s,o),lt.bind(ot,t).bind(it,e),g.removeClass(l+"off").addClass(l+"on")}function o(){e(),lt.unbind(ot,t).unbind(it,e),M.html(B.slideshowStart).unbind(s).one(s,function(){Q.next(),i()}),g.removeClass(l+"on").addClass(l+"off")}function n(){r=!1,M.hide(),e(),lt.unbind(ot,t).unbind(it,e),g.removeClass(l+"off "+l+"on")}var r,h,l=Z+"Slideshow_",s="click."+Z;return function(){r?B.slideshow||(lt.unbind(nt,n),n()):B.slideshow&&k[1]&&(r=!0,lt.one(nt,n),B.slideshowAuto?i():o(),M.show())}}();e.colorbox||(e(f),Q=e.fn[Y]=e[Y]=function(t,i){var o=this;if(t=t||{},f(),p()){if(e.isFunction(o))o=e("<a/>"),t.open=!0;else if(!o[0])return o;i&&(t.onComplete=i),o.each(function(){e.data(this,Y,e.extend({},e.data(this,Y)||X,t))}).addClass(et),(e.isFunction(t.open)&&t.open.call(o)||t.open)&&u(o[0])}return o},Q.position=function(t,i){function o(){x[0].style.width=C[0].style.width=y[0].style.width=parseInt(g[0].style.width,10)-_+"px",y[0].style.height=b[0].style.height=T[0].style.height=parseInt(g[0].style.height,10)-O+"px"}var r,l,s,a=0,d=0,c=g.offset();if(E.unbind("resize."+Z),g.css({top:-9e4,left:-9e4}),l=E.scrollTop(),s=E.scrollLeft(),B.fixed?(c.top-=l,c.left-=s,g.css({position:"fixed"})):(a=l,d=s,g.css({position:"absolute"})),d+=B.right!==!1?Math.max(E.width()-B.w-A-_-h(B.right,"x"),0):B.left!==!1?h(B.left,"x"):Math.round(Math.max(E.width()-B.w-A-_,0)/2),a+=B.bottom!==!1?Math.max(n()-B.h-D-O-h(B.bottom,"y"),0):B.top!==!1?h(B.top,"y"):Math.round(Math.max(n()-B.h-D-O,0)/2),g.css({top:c.top,left:c.left,visibility:"visible"}),v[0].style.width=v[0].style.height="9999px",r={width:B.w+A+_,height:B.h+D+O,top:a,left:d},t){var u=0;e.each(r,function(e){return r[e]!==dt[e]?(u=t,void 0):void 0}),t=u}dt=r,t||g.css(r),g.dequeue().animate(r,{duration:t||0,complete:function(){o(),$=!1,v[0].style.width=B.w+A+_+"px",v[0].style.height=B.h+D+O+"px",B.reposition&&setTimeout(function(){E.bind("resize."+Z,Q.position)},1),i&&i()},step:o})},Q.resize=function(e){var t;U&&(e=e||{},e.width&&(B.w=h(e.width,"x")-A-_),e.innerWidth&&(B.w=h(e.innerWidth,"x")),H.css({width:B.w}),e.height&&(B.h=h(e.height,"y")-D-O),e.innerHeight&&(B.h=h(e.innerHeight,"y")),e.innerHeight||e.height||(t=H.scrollTop(),H.css({height:"auto"}),B.h=H.height()),H.css({height:B.h}),t&&H.scrollTop(t),Q.position("none"===B.transition?0:B.speed))},Q.prep=function(i){function n(){return B.w=B.w||H.width(),B.w=B.mw&&B.mw<B.w?B.mw:B.w,B.w}function h(){return B.h=B.h||H.height(),B.h=B.mh&&B.mh<B.h?B.mh:B.h,B.h}if(U){var a,d="none"===B.transition?0:B.speed;H.empty().remove(),H=o(st,"LoadedContent").append(i),H.hide().appendTo(W.show()).css({width:n(),overflow:B.scrolling?"auto":"hidden"}).css({height:h()}).prependTo(y),W.hide(),e(j).css({"float":"none"}),a=function(){function i(){e.support.opacity===!1&&g[0].style.removeAttribute("filter")}var n,h,a=k.length,u="frameBorder",f="allowTransparency";U&&(h=function(){clearTimeout(G),F.hide(),c(ot,B.onComplete)},L.html(B.title).add(H).show(),a>1?("string"==typeof B.current&&S.html(B.current.replace("{current}",z+1).replace("{total}",a)).show(),R[B.loop||a-1>z?"show":"hide"]().html(B.next),I[B.loop||z?"show":"hide"]().html(B.previous),ct(),B.preloading&&e.each([r(-1),r(1)],function(){var i,o,n=k[this],r=e.data(n,Y);r&&r.href?(i=r.href,e.isFunction(i)&&(i=i.call(n))):i=e(n).attr("href"),i&&l(r,i)&&(i=s(r,i),o=t.createElement("img"),o.src=i)})):P.hide(),B.iframe?(n=o("iframe")[0],u in n&&(n[u]=0),f in n&&(n[f]="true"),B.scrolling||(n.scrolling="no"),e(n).attr({src:B.href,name:(new Date).getTime(),"class":Z+"Iframe",allowFullScreen:!0,webkitAllowFullScreen:!0,mozallowfullscreen:!0}).one("load",h).appendTo(H),lt.one(ht,function(){n.src="//about:blank"}),B.fastIframe&&e(n).trigger("load")):h(),"fade"===B.transition?g.fadeTo(d,1,i):i())},"fade"===B.transition?g.fadeTo(d,0,function(){Q.position(0,a)}):Q.position(d,a)}},Q.next=function(){!$&&k[1]&&(B.loop||k[z+1])&&(z=r(1),u(k[z]))},Q.prev=function(){!$&&k[1]&&(B.loop||z)&&(z=r(-1),u(k[z]))},Q.close=function(){U&&!q&&(q=!0,U=!1,c(nt,B.onCleanup),E.unbind("."+Z),w.fadeTo(B.fadeOut||0,0),g.stop().fadeTo(B.fadeOut||0,0,function(){g.add(w).css({opacity:1,cursor:"auto"}).hide(),c(ht),H.empty().remove(),setTimeout(function(){q=!1,c(rt,B.onClosed)},1)}))},Q.remove=function(){g&&(g.stop(),e.colorbox.close(),g.stop().remove(),w.remove(),q=!1,g=null,e("."+et).removeData(Y).removeClass(et),e(t).unbind("click."+Z))},Q.element=function(){return e(N)},Q.settings=X)})(jQuery,document,window);
|
skin/frontend/base/default/magmodules/colorbox/theme1/colorbox.css
CHANGED
|
@@ -1,86 +1,58 @@
|
|
| 1 |
/*
|
| 2 |
-
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
|
|
|
| 6 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 7 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 8 |
#cboxContent{position:relative;}
|
| 9 |
-
#cboxLoadedContent{overflow:auto;}
|
| 10 |
#cboxTitle{margin:0;}
|
| 11 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 12 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 13 |
-
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
|
| 14 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 15 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 16 |
|
| 17 |
/*
|
| 18 |
User Style:
|
| 19 |
-
Change the following styles to modify the appearance of
|
| 20 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 21 |
*/
|
| 22 |
-
#cboxOverlay{background
|
| 23 |
-
#colorbox{}
|
| 24 |
-
#cboxTopLeft{width:
|
| 25 |
-
#
|
| 26 |
-
#
|
| 27 |
-
#
|
| 28 |
-
#
|
| 29 |
-
#
|
| 30 |
-
#
|
| 31 |
-
#
|
| 32 |
-
#cboxContent{background:#fff; overflow:
|
| 33 |
.cboxIframe{background:#fff;}
|
| 34 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 35 |
-
#cboxLoadedContent{margin-bottom:
|
| 36 |
-
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
|
| 37 |
-
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
|
| 38 |
-
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
|
| 39 |
-
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
|
| 40 |
-
#cboxPrevious:hover{background-position:-75px -25px;}
|
| 41 |
-
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
|
| 42 |
-
#cboxNext:hover{background-position:-50px -25px;}
|
| 43 |
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
|
| 44 |
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
| 45 |
-
#
|
| 46 |
-
#
|
| 47 |
|
| 48 |
-
/*
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
.cboxIE #cboxTopLeft,
|
| 54 |
-
.cboxIE #cboxTopCenter,
|
| 55 |
-
.cboxIE #cboxTopRight,
|
| 56 |
-
.cboxIE #cboxBottomLeft,
|
| 57 |
-
.cboxIE #cboxBottomCenter,
|
| 58 |
-
.cboxIE #cboxBottomRight,
|
| 59 |
-
.cboxIE #cboxMiddleLeft,
|
| 60 |
-
.cboxIE #cboxMiddleRight {
|
| 61 |
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
|
| 62 |
-
}
|
| 63 |
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
|
| 71 |
-
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
|
| 72 |
-
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
|
| 73 |
-
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
|
| 74 |
-
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
|
| 75 |
-
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}
|
| 76 |
|
| 77 |
-
.
|
| 78 |
-
.
|
| 79 |
-
.
|
| 80 |
-
.
|
| 81 |
-
.cboxIE6 #cboxBottomCenter,
|
| 82 |
-
.cboxIE6 #cboxBottomRight,
|
| 83 |
-
.cboxIE6 #cboxMiddleLeft,
|
| 84 |
-
.cboxIE6 #cboxMiddleRight {
|
| 85 |
-
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
|
| 86 |
-
}
|
| 1 |
/*
|
| 2 |
+
Colorbox Core Style:
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
| 6 |
+
#cboxWrapper {max-width:none;}
|
| 7 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 8 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 9 |
#cboxContent{position:relative;}
|
| 10 |
+
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
| 11 |
#cboxTitle{margin:0;}
|
| 12 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 13 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 14 |
+
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
| 15 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 16 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 17 |
|
| 18 |
/*
|
| 19 |
User Style:
|
| 20 |
+
Change the following styles to modify the appearance of Colorbox. They are
|
| 21 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 22 |
*/
|
| 23 |
+
#cboxOverlay{background:#000;}
|
| 24 |
+
#colorbox{outline:0;}
|
| 25 |
+
#cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;}
|
| 26 |
+
#cboxTopCenter{height:14px; background:url(images/border.png) repeat-x top left;}
|
| 27 |
+
#cboxTopRight{width:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;}
|
| 28 |
+
#cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;}
|
| 29 |
+
#cboxBottomCenter{height:43px; background:url(images/border.png) repeat-x bottom left;}
|
| 30 |
+
#cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;}
|
| 31 |
+
#cboxMiddleLeft{width:14px; background:url(images/controls.png) repeat-y -175px 0;}
|
| 32 |
+
#cboxMiddleRight{width:14px; background:url(images/controls.png) repeat-y -211px 0;}
|
| 33 |
+
#cboxContent{background:#fff; overflow:visible;}
|
| 34 |
.cboxIframe{background:#fff;}
|
| 35 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 36 |
+
#cboxLoadedContent{margin-bottom:5px;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 37 |
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
|
| 38 |
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
| 39 |
+
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
|
| 40 |
+
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
|
| 41 |
|
| 42 |
+
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
| 43 |
+
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; position:absolute; bottom:-29px; background:url(images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
|
| 44 |
+
|
| 45 |
+
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
| 46 |
+
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 47 |
|
| 48 |
+
#cboxPrevious{left:0px; background-position: -51px -25px;}
|
| 49 |
+
#cboxPrevious:hover{background-position:-51px 0px;}
|
| 50 |
+
#cboxNext{left:27px; background-position:-75px -25px;}
|
| 51 |
+
#cboxNext:hover{background-position:-75px 0px;}
|
| 52 |
+
#cboxClose{right:0; background-position:-100px -25px;}
|
| 53 |
+
#cboxClose:hover{background-position:-100px 0px;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 54 |
|
| 55 |
+
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
|
| 56 |
+
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;}
|
| 57 |
+
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
|
| 58 |
+
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/border.png
CHANGED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/controls.png
CHANGED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderBottomCenter.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderBottomLeft.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderBottomRight.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderMiddleLeft.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderMiddleRight.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderTopCenter.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderTopLeft.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/ie6/borderTopRight.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/images/loading_background.png
CHANGED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme1/index.html
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset='utf-8'/>
|
| 5 |
+
<title>Colorbox Examples</title>
|
| 6 |
+
<style>
|
| 7 |
+
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
|
| 8 |
+
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
|
| 9 |
+
h2{font-size:13px; margin:15px 0 0 0;}
|
| 10 |
+
</style>
|
| 11 |
+
<link rel="stylesheet" href="colorbox.css" />
|
| 12 |
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
| 13 |
+
<script src="../jquery.colorbox.js"></script>
|
| 14 |
+
<script>
|
| 15 |
+
$(document).ready(function(){
|
| 16 |
+
//Examples of how to assign the Colorbox event to elements
|
| 17 |
+
$(".group1").colorbox({rel:'group1'});
|
| 18 |
+
$(".group2").colorbox({rel:'group2', transition:"fade"});
|
| 19 |
+
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
|
| 20 |
+
$(".group4").colorbox({rel:'group4', slideshow:true});
|
| 21 |
+
$(".ajax").colorbox();
|
| 22 |
+
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
|
| 23 |
+
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
|
| 24 |
+
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
|
| 25 |
+
$(".inline").colorbox({inline:true, width:"50%"});
|
| 26 |
+
$(".callbacks").colorbox({
|
| 27 |
+
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
|
| 28 |
+
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
|
| 29 |
+
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
|
| 30 |
+
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
|
| 31 |
+
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
|
| 32 |
+
});
|
| 33 |
+
|
| 34 |
+
$('.non-retina').colorbox({rel:'group5', transition:'none'})
|
| 35 |
+
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
|
| 36 |
+
|
| 37 |
+
//Example of preserving a JavaScript event for inline calls.
|
| 38 |
+
$("#click").click(function(){
|
| 39 |
+
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
|
| 40 |
+
return false;
|
| 41 |
+
});
|
| 42 |
+
});
|
| 43 |
+
</script>
|
| 44 |
+
</head>
|
| 45 |
+
<body>
|
| 46 |
+
<h1>Colorbox Demonstration</h1>
|
| 47 |
+
<h2>Elastic Transition</h2>
|
| 48 |
+
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 49 |
+
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 50 |
+
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 51 |
+
|
| 52 |
+
<h2>Fade Transition</h2>
|
| 53 |
+
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
|
| 54 |
+
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 55 |
+
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 56 |
+
|
| 57 |
+
<h2>No Transition + fixed width and height (75% of screen size)</h2>
|
| 58 |
+
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 59 |
+
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 60 |
+
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 61 |
+
|
| 62 |
+
<h2>Slideshow</h2>
|
| 63 |
+
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 64 |
+
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 65 |
+
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 66 |
+
|
| 67 |
+
<h2>Other Content Types</h2>
|
| 68 |
+
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
|
| 69 |
+
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
|
| 70 |
+
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
|
| 71 |
+
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
|
| 72 |
+
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
|
| 73 |
+
|
| 74 |
+
<h2>Demonstration of using callbacks</h2>
|
| 75 |
+
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
|
| 76 |
+
|
| 77 |
+
|
| 78 |
+
<h2>Retina Images</h2>
|
| 79 |
+
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
|
| 80 |
+
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>
|
| 81 |
+
|
| 82 |
+
<!-- This contains the hidden content for inline calls -->
|
| 83 |
+
<div style='display:none'>
|
| 84 |
+
<div id='inline_content' style='padding:10px; background:#fff;'>
|
| 85 |
+
<p><strong>This content comes from a hidden element on this page.</strong></p>
|
| 86 |
+
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
|
| 87 |
+
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
|
| 88 |
+
|
| 89 |
+
<p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
|
| 90 |
+
<p>Updating Content Example:<br />
|
| 91 |
+
<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</body>
|
| 95 |
+
</html>
|
skin/frontend/base/default/magmodules/colorbox/theme2/colorbox.css
CHANGED
|
@@ -1,43 +1,66 @@
|
|
| 1 |
/*
|
| 2 |
-
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
|
|
|
| 6 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 7 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 8 |
#cboxContent{position:relative;}
|
| 9 |
-
#cboxLoadedContent{overflow:auto;}
|
| 10 |
#cboxTitle{margin:0;}
|
| 11 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 12 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 13 |
-
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
|
| 14 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 15 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 16 |
|
| 17 |
/*
|
| 18 |
User Style:
|
| 19 |
-
Change the following styles to modify the appearance of
|
| 20 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 21 |
*/
|
| 22 |
#cboxOverlay{background:#fff;}
|
| 23 |
-
#colorbox{}
|
| 24 |
-
#
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 25 |
.cboxIframe{background:#fff;}
|
| 26 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 27 |
-
#cboxLoadedContent{
|
| 28 |
-
#
|
| 29 |
-
#
|
| 30 |
-
#
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
#cboxPrevious{
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
#cboxNext:
|
| 37 |
-
|
| 38 |
-
#
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
/*
|
| 2 |
+
Colorbox Core Style:
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
| 6 |
+
#cboxWrapper {max-width:none;}
|
| 7 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 8 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 9 |
#cboxContent{position:relative;}
|
| 10 |
+
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
| 11 |
#cboxTitle{margin:0;}
|
| 12 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 13 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 14 |
+
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
| 15 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 16 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 17 |
|
| 18 |
/*
|
| 19 |
User Style:
|
| 20 |
+
Change the following styles to modify the appearance of Colorbox. They are
|
| 21 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 22 |
*/
|
| 23 |
#cboxOverlay{background:#fff;}
|
| 24 |
+
#colorbox{outline:0;}
|
| 25 |
+
#cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 0;}
|
| 26 |
+
#cboxTopCenter{height:25px; background:url(images/border1.png) repeat-x 0 -50px;}
|
| 27 |
+
#cboxTopRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px 0;}
|
| 28 |
+
#cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 -25px;}
|
| 29 |
+
#cboxBottomCenter{height:25px; background:url(images/border1.png) repeat-x 0 -75px;}
|
| 30 |
+
#cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px -25px;}
|
| 31 |
+
#cboxMiddleLeft{width:25px; background:url(images/border2.png) repeat-y 0 0;}
|
| 32 |
+
#cboxMiddleRight{width:25px; background:url(images/border2.png) repeat-y -25px 0;}
|
| 33 |
+
#cboxContent{background:#fff; overflow:hidden;}
|
| 34 |
.cboxIframe{background:#fff;}
|
| 35 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 36 |
+
#cboxLoadedContent{margin-bottom:20px;}
|
| 37 |
+
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
|
| 38 |
+
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
|
| 39 |
+
#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}
|
| 40 |
+
|
| 41 |
+
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
| 42 |
+
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
|
| 43 |
+
|
| 44 |
+
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
| 45 |
+
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
| 46 |
+
|
| 47 |
+
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
|
| 48 |
+
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
|
| 49 |
+
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
|
| 50 |
+
#cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}
|
| 51 |
+
|
| 52 |
+
/*
|
| 53 |
+
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
|
| 54 |
+
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
|
| 55 |
+
See: http://jacklmoore.com/notes/ie-transparency-problems/
|
| 56 |
+
*/
|
| 57 |
+
.cboxIE #cboxTopLeft,
|
| 58 |
+
.cboxIE #cboxTopCenter,
|
| 59 |
+
.cboxIE #cboxTopRight,
|
| 60 |
+
.cboxIE #cboxBottomLeft,
|
| 61 |
+
.cboxIE #cboxBottomCenter,
|
| 62 |
+
.cboxIE #cboxBottomRight,
|
| 63 |
+
.cboxIE #cboxMiddleLeft,
|
| 64 |
+
.cboxIE #cboxMiddleRight {
|
| 65 |
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
|
| 66 |
+
}
|
skin/frontend/base/default/magmodules/colorbox/{theme4 → theme2}/images/border1.png
RENAMED
|
File without changes
|
skin/frontend/base/default/magmodules/colorbox/{theme4 → theme2}/images/border2.png
RENAMED
|
File without changes
|
skin/frontend/base/default/magmodules/colorbox/theme2/images/loading.gif
CHANGED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme2/index.html
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset='utf-8'/>
|
| 5 |
+
<title>Colorbox Examples</title>
|
| 6 |
+
<style>
|
| 7 |
+
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
|
| 8 |
+
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
|
| 9 |
+
h2{font-size:13px; margin:15px 0 0 0;}
|
| 10 |
+
</style>
|
| 11 |
+
<link rel="stylesheet" href="colorbox.css" />
|
| 12 |
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
| 13 |
+
<script src="../jquery.colorbox.js"></script>
|
| 14 |
+
<script>
|
| 15 |
+
$(document).ready(function(){
|
| 16 |
+
//Examples of how to assign the Colorbox event to elements
|
| 17 |
+
$(".group1").colorbox({rel:'group1'});
|
| 18 |
+
$(".group2").colorbox({rel:'group2', transition:"fade"});
|
| 19 |
+
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
|
| 20 |
+
$(".group4").colorbox({rel:'group4', slideshow:true});
|
| 21 |
+
$(".ajax").colorbox();
|
| 22 |
+
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
|
| 23 |
+
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
|
| 24 |
+
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
|
| 25 |
+
$(".inline").colorbox({inline:true, width:"50%"});
|
| 26 |
+
$(".callbacks").colorbox({
|
| 27 |
+
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
|
| 28 |
+
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
|
| 29 |
+
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
|
| 30 |
+
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
|
| 31 |
+
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
|
| 32 |
+
});
|
| 33 |
+
|
| 34 |
+
$('.non-retina').colorbox({rel:'group5', transition:'none'})
|
| 35 |
+
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
|
| 36 |
+
|
| 37 |
+
//Example of preserving a JavaScript event for inline calls.
|
| 38 |
+
$("#click").click(function(){
|
| 39 |
+
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
|
| 40 |
+
return false;
|
| 41 |
+
});
|
| 42 |
+
});
|
| 43 |
+
</script>
|
| 44 |
+
</head>
|
| 45 |
+
<body>
|
| 46 |
+
<h1>Colorbox Demonstration</h1>
|
| 47 |
+
<h2>Elastic Transition</h2>
|
| 48 |
+
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 49 |
+
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 50 |
+
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 51 |
+
|
| 52 |
+
<h2>Fade Transition</h2>
|
| 53 |
+
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
|
| 54 |
+
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 55 |
+
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 56 |
+
|
| 57 |
+
<h2>No Transition + fixed width and height (75% of screen size)</h2>
|
| 58 |
+
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 59 |
+
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 60 |
+
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 61 |
+
|
| 62 |
+
<h2>Slideshow</h2>
|
| 63 |
+
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 64 |
+
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 65 |
+
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 66 |
+
|
| 67 |
+
<h2>Other Content Types</h2>
|
| 68 |
+
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
|
| 69 |
+
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
|
| 70 |
+
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
|
| 71 |
+
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
|
| 72 |
+
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
|
| 73 |
+
|
| 74 |
+
<h2>Demonstration of using callbacks</h2>
|
| 75 |
+
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
|
| 76 |
+
|
| 77 |
+
|
| 78 |
+
<h2>Retina Images</h2>
|
| 79 |
+
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
|
| 80 |
+
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>
|
| 81 |
+
|
| 82 |
+
<!-- This contains the hidden content for inline calls -->
|
| 83 |
+
<div style='display:none'>
|
| 84 |
+
<div id='inline_content' style='padding:10px; background:#fff;'>
|
| 85 |
+
<p><strong>This content comes from a hidden element on this page.</strong></p>
|
| 86 |
+
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
|
| 87 |
+
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
|
| 88 |
+
|
| 89 |
+
<p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
|
| 90 |
+
<p>Updating Content Example:<br />
|
| 91 |
+
<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</body>
|
| 95 |
+
</html>
|
skin/frontend/base/default/magmodules/colorbox/theme3/colorbox.css
CHANGED
|
@@ -1,38 +1,45 @@
|
|
| 1 |
/*
|
| 2 |
-
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
|
|
|
| 6 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 7 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 8 |
#cboxContent{position:relative;}
|
| 9 |
-
#cboxLoadedContent{overflow:auto;}
|
| 10 |
#cboxTitle{margin:0;}
|
| 11 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 12 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 13 |
-
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
|
| 14 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 15 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 16 |
|
| 17 |
/*
|
| 18 |
User Style:
|
| 19 |
-
Change the following styles to modify the appearance of
|
| 20 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 21 |
*/
|
| 22 |
#cboxOverlay{background:#000;}
|
| 23 |
-
#colorbox{}
|
| 24 |
-
#cboxContent{margin-top:20px;}
|
| 25 |
.cboxIframe{background:#fff;}
|
| 26 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 27 |
#cboxLoadedContent{border:5px solid #000; background:#fff;}
|
| 28 |
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
|
| 29 |
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 30 |
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
|
| 31 |
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
|
| 32 |
#cboxPrevious:hover{background-position:bottom left;}
|
| 33 |
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
|
| 34 |
#cboxNext:hover{background-position:bottom right;}
|
| 35 |
-
#cboxLoadingOverlay{background:#000;}
|
| 36 |
-
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
| 37 |
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
|
| 38 |
-
#cboxClose:hover{background-position:bottom center;}
|
| 1 |
/*
|
| 2 |
+
Colorbox Core Style:
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
| 6 |
+
#cboxWrapper {max-width:none;}
|
| 7 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 8 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 9 |
#cboxContent{position:relative;}
|
| 10 |
+
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
| 11 |
#cboxTitle{margin:0;}
|
| 12 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 13 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 14 |
+
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
| 15 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 16 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 17 |
|
| 18 |
/*
|
| 19 |
User Style:
|
| 20 |
+
Change the following styles to modify the appearance of Colorbox. They are
|
| 21 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 22 |
*/
|
| 23 |
#cboxOverlay{background:#000;}
|
| 24 |
+
#colorbox{outline:0;}
|
| 25 |
+
#cboxContent{margin-top:20px;background:#000;}
|
| 26 |
.cboxIframe{background:#fff;}
|
| 27 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 28 |
#cboxLoadedContent{border:5px solid #000; background:#fff;}
|
| 29 |
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
|
| 30 |
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
|
| 31 |
+
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
| 32 |
+
|
| 33 |
+
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
| 34 |
+
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
|
| 35 |
+
|
| 36 |
+
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
| 37 |
+
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
| 38 |
+
|
| 39 |
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
|
| 40 |
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
|
| 41 |
#cboxPrevious:hover{background-position:bottom left;}
|
| 42 |
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
|
| 43 |
#cboxNext:hover{background-position:bottom right;}
|
|
|
|
|
|
|
| 44 |
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
|
| 45 |
+
#cboxClose:hover{background-position:bottom center;}
|
skin/frontend/base/default/magmodules/colorbox/theme3/index.html
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset='utf-8'/>
|
| 5 |
+
<title>Colorbox Examples</title>
|
| 6 |
+
<style>
|
| 7 |
+
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
|
| 8 |
+
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
|
| 9 |
+
h2{font-size:13px; margin:15px 0 0 0;}
|
| 10 |
+
</style>
|
| 11 |
+
<link rel="stylesheet" href="colorbox.css" />
|
| 12 |
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
| 13 |
+
<script src="../jquery.colorbox.js"></script>
|
| 14 |
+
<script>
|
| 15 |
+
$(document).ready(function(){
|
| 16 |
+
//Examples of how to assign the Colorbox event to elements
|
| 17 |
+
$(".group1").colorbox({rel:'group1'});
|
| 18 |
+
$(".group2").colorbox({rel:'group2', transition:"fade"});
|
| 19 |
+
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
|
| 20 |
+
$(".group4").colorbox({rel:'group4', slideshow:true});
|
| 21 |
+
$(".ajax").colorbox();
|
| 22 |
+
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
|
| 23 |
+
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
|
| 24 |
+
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
|
| 25 |
+
$(".inline").colorbox({inline:true, width:"50%"});
|
| 26 |
+
$(".callbacks").colorbox({
|
| 27 |
+
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
|
| 28 |
+
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
|
| 29 |
+
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
|
| 30 |
+
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
|
| 31 |
+
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
|
| 32 |
+
});
|
| 33 |
+
|
| 34 |
+
$('.non-retina').colorbox({rel:'group5', transition:'none'})
|
| 35 |
+
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
|
| 36 |
+
|
| 37 |
+
//Example of preserving a JavaScript event for inline calls.
|
| 38 |
+
$("#click").click(function(){
|
| 39 |
+
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
|
| 40 |
+
return false;
|
| 41 |
+
});
|
| 42 |
+
});
|
| 43 |
+
</script>
|
| 44 |
+
</head>
|
| 45 |
+
<body>
|
| 46 |
+
<h1>Colorbox Demonstration</h1>
|
| 47 |
+
<h2>Elastic Transition</h2>
|
| 48 |
+
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 49 |
+
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 50 |
+
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 51 |
+
|
| 52 |
+
<h2>Fade Transition</h2>
|
| 53 |
+
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
|
| 54 |
+
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 55 |
+
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 56 |
+
|
| 57 |
+
<h2>No Transition + fixed width and height (75% of screen size)</h2>
|
| 58 |
+
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 59 |
+
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 60 |
+
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 61 |
+
|
| 62 |
+
<h2>Slideshow</h2>
|
| 63 |
+
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 64 |
+
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 65 |
+
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 66 |
+
|
| 67 |
+
<h2>Other Content Types</h2>
|
| 68 |
+
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
|
| 69 |
+
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
|
| 70 |
+
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
|
| 71 |
+
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
|
| 72 |
+
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
|
| 73 |
+
|
| 74 |
+
<h2>Demonstration of using callbacks</h2>
|
| 75 |
+
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
|
| 76 |
+
|
| 77 |
+
|
| 78 |
+
<h2>Retina Images</h2>
|
| 79 |
+
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
|
| 80 |
+
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>
|
| 81 |
+
|
| 82 |
+
<!-- This contains the hidden content for inline calls -->
|
| 83 |
+
<div style='display:none'>
|
| 84 |
+
<div id='inline_content' style='padding:10px; background:#fff;'>
|
| 85 |
+
<p><strong>This content comes from a hidden element on this page.</strong></p>
|
| 86 |
+
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
|
| 87 |
+
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
|
| 88 |
+
|
| 89 |
+
<p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
|
| 90 |
+
<p>Updating Content Example:<br />
|
| 91 |
+
<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</body>
|
| 95 |
+
</html>
|
skin/frontend/base/default/magmodules/colorbox/theme4/colorbox.css
CHANGED
|
@@ -1,82 +1,50 @@
|
|
| 1 |
/*
|
| 2 |
-
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
|
|
|
| 6 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 7 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 8 |
#cboxContent{position:relative;}
|
| 9 |
-
#cboxLoadedContent{overflow:auto;}
|
| 10 |
#cboxTitle{margin:0;}
|
| 11 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 12 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 13 |
-
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
|
| 14 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 15 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 16 |
|
| 17 |
/*
|
| 18 |
User Style:
|
| 19 |
-
Change the following styles to modify the appearance of
|
| 20 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 21 |
*/
|
| 22 |
#cboxOverlay{background:#fff;}
|
| 23 |
-
#colorbox{}
|
| 24 |
-
#
|
| 25 |
-
#cboxTopCenter{height:25px; background:url(images/border1.png) repeat-x 0 -50px;}
|
| 26 |
-
#cboxTopRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px 0;}
|
| 27 |
-
#cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 -25px;}
|
| 28 |
-
#cboxBottomCenter{height:25px; background:url(images/border1.png) repeat-x 0 -75px;}
|
| 29 |
-
#cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px -25px;}
|
| 30 |
-
#cboxMiddleLeft{width:25px; background:url(images/border2.png) repeat-y 0 0;}
|
| 31 |
-
#cboxMiddleRight{width:25px; background:url(images/border2.png) repeat-y -25px 0;}
|
| 32 |
-
#cboxContent{background:#fff; overflow:hidden;}
|
| 33 |
.cboxIframe{background:#fff;}
|
| 34 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 35 |
-
#cboxLoadedContent{
|
| 36 |
-
#
|
| 37 |
-
#
|
| 38 |
-
#
|
| 39 |
-
#
|
| 40 |
-
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
|
| 41 |
-
#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}
|
| 42 |
-
#cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}
|
| 43 |
|
| 44 |
-
/*
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
.cboxIE #cboxTopLeft,
|
| 50 |
-
.cboxIE #cboxTopCenter,
|
| 51 |
-
.cboxIE #cboxTopRight,
|
| 52 |
-
.cboxIE #cboxBottomLeft,
|
| 53 |
-
.cboxIE #cboxBottomCenter,
|
| 54 |
-
.cboxIE #cboxBottomRight,
|
| 55 |
-
.cboxIE #cboxMiddleLeft,
|
| 56 |
-
.cboxIE #cboxMiddleRight {
|
| 57 |
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
|
| 58 |
-
}
|
| 59 |
-
|
| 60 |
-
/*
|
| 61 |
-
The following provides PNG transparency support for IE6
|
| 62 |
-
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
|
| 63 |
-
*/
|
| 64 |
-
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
|
| 65 |
-
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
|
| 66 |
-
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
|
| 67 |
-
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
|
| 68 |
-
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
|
| 69 |
-
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
|
| 70 |
-
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
|
| 71 |
-
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}
|
| 72 |
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
.
|
| 80 |
-
.
|
| 81 |
-
|
| 82 |
-
}
|
|
|
| 1 |
/*
|
| 2 |
+
Colorbox Core Style:
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
| 6 |
+
#cboxWrapper {max-width:none;}
|
| 7 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 8 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 9 |
#cboxContent{position:relative;}
|
| 10 |
+
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
| 11 |
#cboxTitle{margin:0;}
|
| 12 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 13 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 14 |
+
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
| 15 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 16 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 17 |
|
| 18 |
/*
|
| 19 |
User Style:
|
| 20 |
+
Change the following styles to modify the appearance of Colorbox. They are
|
| 21 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 22 |
*/
|
| 23 |
#cboxOverlay{background:#fff;}
|
| 24 |
+
#colorbox{outline:0;}
|
| 25 |
+
#cboxContent{margin-top:32px; overflow:visible; background:#000;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 26 |
.cboxIframe{background:#fff;}
|
| 27 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 28 |
+
#cboxLoadedContent{background:#000; padding:1px;}
|
| 29 |
+
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
| 30 |
+
#cboxLoadingOverlay{background:#000;}
|
| 31 |
+
#cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
|
| 32 |
+
#cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
|
|
|
|
|
|
|
|
|
|
| 33 |
|
| 34 |
+
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
| 35 |
+
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;}
|
| 36 |
+
|
| 37 |
+
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
| 38 |
+
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 39 |
|
| 40 |
+
#cboxPrevious{background-position:0px 0px; right:44px;}
|
| 41 |
+
#cboxPrevious:hover{background-position:0px -25px;}
|
| 42 |
+
#cboxNext{background-position:-25px 0px; right:22px;}
|
| 43 |
+
#cboxNext:hover{background-position:-25px -25px;}
|
| 44 |
+
#cboxClose{background-position:-50px 0px; right:0;}
|
| 45 |
+
#cboxClose:hover{background-position:-50px -25px;}
|
| 46 |
+
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
|
| 47 |
+
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
|
| 48 |
+
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
|
| 49 |
+
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
|
| 50 |
+
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}
|
skin/frontend/base/default/magmodules/colorbox/{theme2 → theme4}/images/controls.png
RENAMED
|
File without changes
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderBottomCenter.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderBottomLeft.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderBottomRight.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderMiddleLeft.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderMiddleRight.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderTopCenter.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderTopLeft.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/ie6/borderTopRight.png
DELETED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/images/loading.gif
CHANGED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme4/index.html
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset='utf-8'/>
|
| 5 |
+
<title>Colorbox Examples</title>
|
| 6 |
+
<style>
|
| 7 |
+
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
|
| 8 |
+
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
|
| 9 |
+
h2{font-size:13px; margin:15px 0 0 0;}
|
| 10 |
+
</style>
|
| 11 |
+
<link rel="stylesheet" href="colorbox.css" />
|
| 12 |
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
| 13 |
+
<script src="../jquery.colorbox.js"></script>
|
| 14 |
+
<script>
|
| 15 |
+
$(document).ready(function(){
|
| 16 |
+
//Examples of how to assign the Colorbox event to elements
|
| 17 |
+
$(".group1").colorbox({rel:'group1'});
|
| 18 |
+
$(".group2").colorbox({rel:'group2', transition:"fade"});
|
| 19 |
+
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
|
| 20 |
+
$(".group4").colorbox({rel:'group4', slideshow:true});
|
| 21 |
+
$(".ajax").colorbox();
|
| 22 |
+
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
|
| 23 |
+
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
|
| 24 |
+
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
|
| 25 |
+
$(".inline").colorbox({inline:true, width:"50%"});
|
| 26 |
+
$(".callbacks").colorbox({
|
| 27 |
+
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
|
| 28 |
+
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
|
| 29 |
+
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
|
| 30 |
+
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
|
| 31 |
+
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
|
| 32 |
+
});
|
| 33 |
+
|
| 34 |
+
$('.non-retina').colorbox({rel:'group5', transition:'none'})
|
| 35 |
+
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
|
| 36 |
+
|
| 37 |
+
//Example of preserving a JavaScript event for inline calls.
|
| 38 |
+
$("#click").click(function(){
|
| 39 |
+
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
|
| 40 |
+
return false;
|
| 41 |
+
});
|
| 42 |
+
});
|
| 43 |
+
</script>
|
| 44 |
+
</head>
|
| 45 |
+
<body>
|
| 46 |
+
<h1>Colorbox Demonstration</h1>
|
| 47 |
+
<h2>Elastic Transition</h2>
|
| 48 |
+
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 49 |
+
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 50 |
+
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 51 |
+
|
| 52 |
+
<h2>Fade Transition</h2>
|
| 53 |
+
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
|
| 54 |
+
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 55 |
+
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 56 |
+
|
| 57 |
+
<h2>No Transition + fixed width and height (75% of screen size)</h2>
|
| 58 |
+
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 59 |
+
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 60 |
+
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 61 |
+
|
| 62 |
+
<h2>Slideshow</h2>
|
| 63 |
+
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 64 |
+
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 65 |
+
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 66 |
+
|
| 67 |
+
<h2>Other Content Types</h2>
|
| 68 |
+
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
|
| 69 |
+
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
|
| 70 |
+
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
|
| 71 |
+
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
|
| 72 |
+
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
|
| 73 |
+
|
| 74 |
+
<h2>Demonstration of using callbacks</h2>
|
| 75 |
+
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
|
| 76 |
+
|
| 77 |
+
|
| 78 |
+
<h2>Retina Images</h2>
|
| 79 |
+
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
|
| 80 |
+
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>
|
| 81 |
+
|
| 82 |
+
<!-- This contains the hidden content for inline calls -->
|
| 83 |
+
<div style='display:none'>
|
| 84 |
+
<div id='inline_content' style='padding:10px; background:#fff;'>
|
| 85 |
+
<p><strong>This content comes from a hidden element on this page.</strong></p>
|
| 86 |
+
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
|
| 87 |
+
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
|
| 88 |
+
|
| 89 |
+
<p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
|
| 90 |
+
<p>Updating Content Example:<br />
|
| 91 |
+
<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</body>
|
| 95 |
+
</html>
|
skin/frontend/base/default/magmodules/colorbox/theme5/colorbox.css
CHANGED
|
@@ -1,52 +1,70 @@
|
|
| 1 |
/*
|
| 2 |
-
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
|
|
|
| 6 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 7 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 8 |
#cboxContent{position:relative;}
|
| 9 |
-
#cboxLoadedContent{overflow:auto;}
|
| 10 |
#cboxTitle{margin:0;}
|
| 11 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 12 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 13 |
-
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
|
| 14 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 15 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 16 |
|
| 17 |
/*
|
| 18 |
User Style:
|
| 19 |
-
Change the following styles to modify the appearance of
|
| 20 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 21 |
*/
|
| 22 |
-
#cboxOverlay{background
|
| 23 |
-
#colorbox{}
|
| 24 |
-
#cboxTopLeft{width:
|
| 25 |
-
#
|
| 26 |
-
#
|
| 27 |
-
#
|
| 28 |
-
#
|
| 29 |
-
#
|
| 30 |
-
#
|
| 31 |
-
#
|
| 32 |
-
#cboxContent{background:#fff; overflow:
|
| 33 |
.cboxIframe{background:#fff;}
|
| 34 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 35 |
-
#cboxLoadedContent{margin-bottom:
|
|
|
|
|
|
|
| 36 |
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
|
| 37 |
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
| 38 |
-
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
|
| 39 |
-
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
|
| 40 |
|
| 41 |
-
|
| 42 |
-
#cboxPrevious{
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
#cboxNext:
|
| 46 |
-
#cboxClose{right:0; background-position:-100px -25px;}
|
| 47 |
-
#cboxClose:hover{background-position:-100px 0px;}
|
| 48 |
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
/*
|
| 2 |
+
Colorbox Core Style:
|
| 3 |
The following CSS is consistent between example themes and should not be altered.
|
| 4 |
*/
|
| 5 |
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
| 6 |
+
#cboxWrapper {max-width:none;}
|
| 7 |
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
| 8 |
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
| 9 |
#cboxContent{position:relative;}
|
| 10 |
+
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
| 11 |
#cboxTitle{margin:0;}
|
| 12 |
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
| 13 |
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
| 14 |
+
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
| 15 |
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
| 16 |
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
| 17 |
|
| 18 |
/*
|
| 19 |
User Style:
|
| 20 |
+
Change the following styles to modify the appearance of Colorbox. They are
|
| 21 |
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
| 22 |
*/
|
| 23 |
+
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
|
| 24 |
+
#colorbox{outline:0;}
|
| 25 |
+
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
|
| 26 |
+
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
|
| 27 |
+
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
|
| 28 |
+
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
|
| 29 |
+
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
|
| 30 |
+
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
|
| 31 |
+
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
|
| 32 |
+
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
|
| 33 |
+
#cboxContent{background:#fff; overflow:hidden;}
|
| 34 |
.cboxIframe{background:#fff;}
|
| 35 |
#cboxError{padding:50px; border:1px solid #ccc;}
|
| 36 |
+
#cboxLoadedContent{margin-bottom:28px;}
|
| 37 |
+
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
|
| 38 |
+
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
|
| 39 |
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
|
| 40 |
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
|
|
|
|
|
|
| 41 |
|
| 42 |
+
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
| 43 |
+
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
|
| 44 |
+
|
| 45 |
+
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
| 46 |
+
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
|
|
|
|
|
|
| 47 |
|
| 48 |
+
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
|
| 49 |
+
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
|
| 50 |
+
#cboxPrevious:hover{background-position:-75px -25px;}
|
| 51 |
+
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
|
| 52 |
+
#cboxNext:hover{background-position:-50px -25px;}
|
| 53 |
+
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
|
| 54 |
+
#cboxClose:hover{background-position:-25px -25px;}
|
| 55 |
+
|
| 56 |
+
/*
|
| 57 |
+
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
|
| 58 |
+
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
|
| 59 |
+
See: http://jacklmoore.com/notes/ie-transparency-problems/
|
| 60 |
+
*/
|
| 61 |
+
.cboxIE #cboxTopLeft,
|
| 62 |
+
.cboxIE #cboxTopCenter,
|
| 63 |
+
.cboxIE #cboxTopRight,
|
| 64 |
+
.cboxIE #cboxBottomLeft,
|
| 65 |
+
.cboxIE #cboxBottomCenter,
|
| 66 |
+
.cboxIE #cboxBottomRight,
|
| 67 |
+
.cboxIE #cboxMiddleLeft,
|
| 68 |
+
.cboxIE #cboxMiddleRight {
|
| 69 |
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
|
| 70 |
+
}
|
skin/frontend/base/default/magmodules/colorbox/theme5/images/border.png
CHANGED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme5/images/controls.png
CHANGED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/theme5/images/loading_background.png
CHANGED
|
Binary file
|
skin/frontend/base/default/magmodules/colorbox/{theme1 → theme5}/images/overlay.png
RENAMED
|
File without changes
|
skin/frontend/base/default/magmodules/colorbox/theme5/index.html
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset='utf-8'/>
|
| 5 |
+
<title>Colorbox Examples</title>
|
| 6 |
+
<style>
|
| 7 |
+
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
|
| 8 |
+
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
|
| 9 |
+
h2{font-size:13px; margin:15px 0 0 0;}
|
| 10 |
+
</style>
|
| 11 |
+
<link rel="stylesheet" href="colorbox.css" />
|
| 12 |
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
| 13 |
+
<script src="../jquery.colorbox.js"></script>
|
| 14 |
+
<script>
|
| 15 |
+
$(document).ready(function(){
|
| 16 |
+
//Examples of how to assign the Colorbox event to elements
|
| 17 |
+
$(".group1").colorbox({rel:'group1'});
|
| 18 |
+
$(".group2").colorbox({rel:'group2', transition:"fade"});
|
| 19 |
+
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
|
| 20 |
+
$(".group4").colorbox({rel:'group4', slideshow:true});
|
| 21 |
+
$(".ajax").colorbox();
|
| 22 |
+
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
|
| 23 |
+
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
|
| 24 |
+
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
|
| 25 |
+
$(".inline").colorbox({inline:true, width:"50%"});
|
| 26 |
+
$(".callbacks").colorbox({
|
| 27 |
+
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
|
| 28 |
+
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
|
| 29 |
+
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
|
| 30 |
+
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
|
| 31 |
+
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
|
| 32 |
+
});
|
| 33 |
+
|
| 34 |
+
$('.non-retina').colorbox({rel:'group5', transition:'none'})
|
| 35 |
+
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
|
| 36 |
+
|
| 37 |
+
//Example of preserving a JavaScript event for inline calls.
|
| 38 |
+
$("#click").click(function(){
|
| 39 |
+
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
|
| 40 |
+
return false;
|
| 41 |
+
});
|
| 42 |
+
});
|
| 43 |
+
</script>
|
| 44 |
+
</head>
|
| 45 |
+
<body>
|
| 46 |
+
<h1>Colorbox Demonstration</h1>
|
| 47 |
+
<h2>Elastic Transition</h2>
|
| 48 |
+
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 49 |
+
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 50 |
+
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 51 |
+
|
| 52 |
+
<h2>Fade Transition</h2>
|
| 53 |
+
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
|
| 54 |
+
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 55 |
+
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 56 |
+
|
| 57 |
+
<h2>No Transition + fixed width and height (75% of screen size)</h2>
|
| 58 |
+
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 59 |
+
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 60 |
+
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 61 |
+
|
| 62 |
+
<h2>Slideshow</h2>
|
| 63 |
+
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
| 64 |
+
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
| 65 |
+
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
| 66 |
+
|
| 67 |
+
<h2>Other Content Types</h2>
|
| 68 |
+
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
|
| 69 |
+
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
|
| 70 |
+
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
|
| 71 |
+
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
|
| 72 |
+
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
|
| 73 |
+
|
| 74 |
+
<h2>Demonstration of using callbacks</h2>
|
| 75 |
+
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
|
| 76 |
+
|
| 77 |
+
|
| 78 |
+
<h2>Retina Images</h2>
|
| 79 |
+
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
|
| 80 |
+
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>
|
| 81 |
+
|
| 82 |
+
<!-- This contains the hidden content for inline calls -->
|
| 83 |
+
<div style='display:none'>
|
| 84 |
+
<div id='inline_content' style='padding:10px; background:#fff;'>
|
| 85 |
+
<p><strong>This content comes from a hidden element on this page.</strong></p>
|
| 86 |
+
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
|
| 87 |
+
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
|
| 88 |
+
|
| 89 |
+
<p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
|
| 90 |
+
<p>Updating Content Example:<br />
|
| 91 |
+
<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</body>
|
| 95 |
+
</html>
|
