# install easy light box
http://www.magentocommerce.com/magento-connect/TemplatesMaster/extension/1487/magento-easy-lightbox
# xml
edit
./app/design/frontend/default/default/layout/easylightbox.xml
replace
easylightbox
to
shadowbox
# phtml
copy
./app/design/frontend/default/default/template/easylightbox/media.phtml
to
./app/design/frontend/default/default/template/shadowbox/media.phtml
edit or download
http://www.panticz.de/sites/default/files/magento/shadowbox/media.phtml
# js
copy
./custom/shadowbox/shadowbox.js
to
./skin/frontend/default/default/js/shadowbox.js
edit ./skin/frontend/default/default/js/shadowbox.js
add
onclick="Shadowbox.close()"
to
id="sb-wrapper-inner"
# css
copy
./custom/shadowbox/shadowbox.css
to
./skin/frontend/default/default/css/shadowbox.css
edit ./skin/frontend/default/default/css/easylightbox.css
add
#sb-body,#sb-loading{background-color: #FFFFFF;}
#sb-wrapper-inner{background-color: #FFFFFF;padding: 5px;}
replace
url(
with
url(/skin/frontend/default/default/images/shadowbox/
replace
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
with
#sb-loading-inner{position:absolute;font-size:14px;line-height:32px;height:32px;top:50%;margin-top:-12px;width:100%;text-align:center;}
replace
#sb-loading-inner span{background:url(/skin/frontend/default/default/images/shadowbox/loading.gif) no-repeat;padding-left:34px;display:inline-block;color:#666666;}
to
#sb-loading-inner span{background:url(/skin/frontend/default/default/images/shadowbox/loading.gif) no-repeat;padding-left:38px;display:inline-block;color:#666666;}
# images
create dir
./skin/frontend/default/default/images/shadowbox/
copy *.png and *.gif to
./skin/frontend/default/default/images/shadowbox/
copy
./skin/frontend/default/default/images/lightbox/loading.gif
to
./skin/frontend/default/default/images/shadowbox/loading.gif
# Links
http://vonlind.com/2008/06/adding-shadowbox-to-magento-ecommerce/
http://www.shadowbox-js.com/