Meta 13 Project Blog
  • Home
  • Links
  • CMS
  • CSS
  • Ecom
  • Email
  • Flash
  • Google
  • HTML
  • Javascript
  • OS
  • PHP
  • SEO
  • SQL
Browse: Home / lightbox

lightbox

Lightbox

By Bryce on September 10, 2012

Current lightbox options to use. Post comments on tips/tricks and tag projects with which one is used. These are also under the links section.

  • Colorbox
  • Fancybox
  • Lightbox 2 (Images only, a little jerky on mobile)
  • PrettyPhoto (Not updated as much but still might be useful)
  • CSS3 Lightbox

Posted in Javascript | Tagged Colorbox, fancybox, lightbox, PrettyPhoto | Leave a response

Magento: Replace Product Image Zoomer with Lightbox

By Darin on December 7, 2011

Follow these instructions to add a Prototype lightbox to the Product Detail page.
http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/catalog/adding_lightbox_to_magento_v2

I did Step 7 differently though (Adding Lightbox to base image)
In this file \app\design\frontend\default\blank\template\catalog\product\view\media.phtml
I commented out:

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
    <?php
        $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="zoom">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <div id="track">
        <div id="handle"></div>
    </div>
    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
//<![CDATA[
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    });
//]]>
</script>
<?php else: ?>
<p class="product-image">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php endif; ?>

and put this

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image">
    <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
    <img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265,265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
    </a>
</p>
<?php else: ?>
<p class="product-image">
    <img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265,265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</p>
<?php endif; ?>

If you get the lightbox working but the Close button image is not loading, try this.
Open \app\design\frontend\default\your_theme\template\page\html\head.phtml
and add a / inside the quotation marks of getJsSkinUrl(”)

var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('/') ?>';

Posted in Ecom, HTML, PHP | Tagged lightbox, Magento, Product Images, Prototype, zoomer | Leave a response

Auto Launch Lightbox On Page Load

By Bryce on June 28, 2010

You can trigger Lightbox (Thickbox, PrettyPhoto) on page load with the following code.

Fancybox

$(document).ready(function(){
 $("#lightbox").fancybox({
 maxWidth    : 700,
 maxHeight    : 548,
 closeClick    : false,
 }).trigger('click');
});
<a href="http://www.stcloudrox.com/lightbox.html" id="lightbox" class="fancybox fancybox.iframe"></a>

Fancybox w/Cookie (https://github.com/carhartl/jquery-cookie)

function openFancybox() {
 setTimeout( function() {$('#lightbox').trigger('click'); },100);
}
jQuery(document).ready(function() {
 var date = new Date();
 var minutes = 30;
 date.setTime(date.getTime() + (minutes * 60 * 1000));
 var visited = $.cookie('visited');
 if (visited == 'yes') {
 return false;
 } else {
 openFancybox();
 }
 $.cookie('visited', 'yes', { expires: date });
 $('#lightbox').fancybox({
 maxWidth    : 700,
 maxHeight    : 548,
 closeClick    : false
 });
});

PrettyPhoto

$(document).ready(function() {
$.prettyPhoto.open("image","title","description");
});

Thickbox

$(document).ready(function() {
tb_show("", "announcement.html?height=400&width=500");
});

Posted in Javascript | Tagged lightbox, PrettyPhoto, Thickbox | Leave a response

R.A. Morton Construction

R.A. Morton Construction

By Bryce on December 30, 2009

Site: www.ramorton.com

Launch Date: 12/30/2009

Details:

  • Simple CMS
  • Flash Image Slideshow
  • Lightbox

Posted in Updates | Tagged lightbox | Leave a response

Tags

.htaccess Advanced Custom Fields Bower c5 cms Composer Concrete 5 Concrete5 Cron CSS3 Cycle Cycle2 fancybox FancyBox2 Foundation Genesis Google Fonts Google Maps Google Webfonts Google Web Fonts Gravity Forms Grunt html5 HTML5 Boilerplate IE7 iPad iPhone jQuery lightbox Lists Magento Media Queries mobile pdf Plesk PrettyPhoto Responsive SASS SCSS static block Twitter typekit Video WordPress YouTube

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Recent Comments

  • Bryce on Responsive Email Templates
  • Justin on Mail Server Settings (Microsoft365)
  • Justin on Mail Server Settings (Microsoft365)
  • Bryce on Mail Server Settings (Microsoft365)
  • Justin on Mail Server Settings (Microsoft365)

Authors

  • Aaron Huisinga
  • Bryce
  • Darin
  • Jason
  • Josh
  • Justin
  • master
  • Nathan
  • nick
  • Paul

Archives

  • March 2016
  • July 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • September 2014
  • July 2014
  • June 2014
  • May 2014
  • December 2013
  • November 2013

Copyright © 2023 Meta 13 Project Blog. Powered by WordPress and Hybrid.