I use jqModal, I had images, and when I click on image need modal window with bigger image. I make it like that:
<div class="catalog-pages-image clearer clearfix">
<?php foreach ($sorted as $page): ?>
<a jqModal="id-<?php echo $page['value_id']; ?>" href="javascript:void(0)" title="<?php echo $this->htmlEscape($_product->getName()) ?>"
rel="<?php echo $this->helper('adaptiveResize/image')->init($_product, 'image', $page->getFile())
->setCropPosition('center')
->adaptiveResize(227, 318); ?>">
<img src="" height="318" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/></a>
<div id="jqModal" class="jqmWindow" style="display: none">
<?php var_dump($page->getFile()); ?>
</div>
<?php endforeach; ?>
</div>
Jquery:
Query('#jqModal')
.jqm({overlay: 0, trigger: false})
//.jqDrag()
jQuery('.catalog-pages-image').children().click(function () {
jQuery(jQuery(this).attr('jqModal')).jqmShow();
});
CSS:
.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
I can't create fiddle, cause of foreach from PHP.
Probably problem in this :
jQuery(jQuery(this).attr('jqModal')).jqmShow();
jQuery('.catalog-pages-image a').click(function () {
jQuery('#jqModal').html(jQuery(this).attr("rel"));
jQuery('#jqModal').jqmShow();
});