简体   繁体   中英

How to implement zoom inside colorbox?

I'm using colorbox to view images... Is it possible to add a zoom option inside the colorbox?

File gallery.php

$(document).ready(function(){
    // initiate colorbox
    $(".albumpix").colorbox({rel:'albumpix', maxWidth:'98%', maxHeight:'98%', slideshow:true, slideshowSpeed:3500, slideshowAuto:false});
}); 

File gallery2.php

<a href="<?php echo $album; ?>/<?php echo $files[$i]; ?>" title="<?php echo $files[$i]; ?>" class="albumpix">
    <img src="<?php echo $thumb; ?>" alt="<?php echo $files[$i]; ?>"/>
</a>

The guy (Jack Moore) who wrote Colorbox also wrote a jQuery Zoom plugin ( http://www.jacklmoore.com/zoom/ ).

$(document).ready(function(){
     $(".albumpix").zoom();
     $('.albumpix').colorbox({
         'onComplete': function(){ 
              $('#cboxLoadedContent img').wrap('<span style="display:inline-block"></span>').css('display', 'block').parent().zoom();
         }
     });
});

The answer is a possible duplicate of: jQuery Zoom inside a colorbox

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM