Bootstrap Lightbox

Ekko Lightbox Github

Powiększanie obrazków – przechodzenie między kolejnymi obrazkami – zintegrowany z bootstrapem

# cd /var/www/html/my_project
# npm init
# npm install ekko-lightbox --save

# cd webroot/jslib
# ln -s /var/www/html/cateroweb-panel/node_modules/ekko-lightbox/dist/ekko-lightbox.js ekko-lightbox.js

# cd ../webroot/css
# ln -s /var/www/html/cateroweb-panel/node_modules/ekko-lightbox/dist/ekko-lightbox.css ekko-lightbox.css

Layout / default.ctp

<link rel="stylesheet" href="/css/ekko-lightbox.css">
....
<?= $this->Html->script('/jslib/ekko-lightbox.js', ['block' => true]) ?>

Skryp aktywujący np. common.js

$('[data-toggle="lightbox"]').on('click', function(e){
    e.preventDefault();
    $(this).ekkoLightbox();
});

Użycie w kodzie

<a href="/img/obrazek1.png" data-toggle="lightbox">
    <img src="/img/obrazek1.png"  data-target="/img/obrazek1.png"  alt="Obrazek">
</a>