Skip to content

Commit

Permalink
docs: add errorMsg option and update example
Browse files Browse the repository at this point in the history
  • Loading branch information
@nzbin
nzbin committed Mar 16, 2024
1 parent d88abfb commit 5e823cd
Show file tree
Hide file tree
Showing 8 changed files with 250 additions and 157 deletions.
6 changes: 6 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,12 @@ <h3>
<small><code>string 'ease-in-out'</code></small>
</h3>
<p>The modal animation easing function.</p>

<h3>
<code>errorMsg</code>
<small><code>string | (context, index) => string ''</code></small>
</h3>
<p>Error message when image could not be loaded.</p>
</div>

<!-- Events -->
Expand Down
37 changes: 17 additions & 20 deletions examples/bezel-less-style.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
}

.photoviewer-footer .photoviewer-toolbar {
display: inline-block;
background-color: rgba(0, 0, 0, .5);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
Expand Down Expand Up @@ -68,29 +69,26 @@
<body dir="ltr">
<div class="container">
<div class="image-set">
<a data-gallery="photoviewer" data-title="Slipping Away by Jerry Fryer" data-group="a"
<a data-title="Slipping Away by Jerry Fryer"
href="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_z.jpg">
<img src="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_s.jpg" alt="">
</a>
<a data-gallery="photoviewer" data-title="Mi Fuego by albert dros" data-group="a"
<a data-title="Mi Fuego by albert dros"
href="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_z.jpg">
<img src="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_s.jpg" alt="">
</a>
<a data-gallery="photoviewer" data-title="Winter Fairytale by Achim Thomae" data-group="a"
<a data-title="Winter Fairytale by Achim Thomae"
href="https://farm1.staticflickr.com/470/31340603494_fb7228020d_z.jpg">
<img src="https://farm1.staticflickr.com/470/31340603494_fb7228020d_s.jpg" alt="">
</a>

<a data-gallery="photoviewer"
href="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg" data-group="b">
<a href="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg">
<img src="https://farm5.staticflickr.com/4267/34162425794_1430f38362_s.jpg" alt="">
</a>
<a data-gallery="photoviewer"
href="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_z.jpg" data-group="b">
<a href="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_z.jpg">
<img src="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_s.jpg" alt="">
</a>
<a data-gallery="photoviewer"
href="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg" data-group="b">
<a href="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg">
<img src="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_s.jpg" alt="">
</a>
</div>
Expand All @@ -102,22 +100,21 @@
<script src="../dist/photoviewer.js"></script>
<script>
// initialize manually with a list of links
$('[data-gallery=photoviewer]').click(function (e) {
$('.image-set a').click(function (e) {

e.preventDefault();

var items = [],
options = {
index: $(this).index(),
};

$('[data-gallery=photoviewer]').each(function () {
items.push({
src: $(this).attr('href'),
title: $(this).attr('data-title')
});
var items = $('.image-set a').get().map(function (el) {
return {
src: $(el).attr('href'),
title: $(el).attr('data-title')
}
});

var options = {
index: $(this).index(),
};

new PhotoViewer(items, options);

});
Expand Down
102 changes: 49 additions & 53 deletions examples/custom-toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,29 +21,26 @@
<body dir="ltr">
<div class="container">
<div class="image-set">
<a data-gallery="photoviewer" data-title="Slipping Away by Jerry Fryer" data-group="a"
<a data-title="Slipping Away by Jerry Fryer"
href="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_z.jpg">
<img src="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_s.jpg" alt="">
</a>
<a data-gallery="photoviewer" data-title="Mi Fuego by albert dros" data-group="a"
<a data-title="Mi Fuego by albert dros"
href="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_z.jpg">
<img src="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_s.jpg" alt="">
</a>
<a data-gallery="photoviewer" data-title="Winter Fairytale by Achim Thomae" data-group="a"
<a data-title="Winter Fairytale by Achim Thomae"
href="https://farm1.staticflickr.com/470/31340603494_fb7228020d_z.jpg">
<img src="https://farm1.staticflickr.com/470/31340603494_fb7228020d_s.jpg" alt="">
</a>

<a data-gallery="photoviewer"
href="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg" data-group="b">
<a href="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg">
<img src="https://farm5.staticflickr.com/4267/34162425794_1430f38362_s.jpg" alt="">
</a>
<a data-gallery="photoviewer"
href="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_z.jpg" data-group="b">
<a href="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_z.jpg">
<img src="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_s.jpg" alt="">
</a>
<a data-gallery="photoviewer"
href="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg" data-group="b">
<a href="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg">
<img src="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_s.jpg" alt="">
</a>
</div>
Expand All @@ -55,56 +52,55 @@
<script src="../dist/photoviewer.js"></script>
<script>
// initialize manually with a list of links
$('[data-gallery=photoviewer]').click(function (e) {
$('.image-set a').click(function (e) {

e.preventDefault();

var items = [],
options = {
index: $(this).index(),
headerToolbar: [
'minimize',
'maximize',
'close'
],
footerToolbar: [
'prev',
'next',
'zoomIn',
'zoomOut',
'fullscreen',
'actualSize',
'rotateLeft',
'rotateRight',
'myCustomButton',
],
customButtons: {
myCustomButton: {
text: 'custom!',
title: 'custom!',
click: function (context, e) {
alert('clicked the custom button!');
}
var items = $('.image-set a').get().map(function (el) {
return {
src: $(el).attr('href'),
title: $(el).attr('data-title')
}
});

var options = {
index: $(this).index(),
headerToolbar: [
'minimize',
'maximize',
'close'
],
footerToolbar: [
'prev',
'next',
'zoomIn',
'zoomOut',
'fullscreen',
'actualSize',
'rotateLeft',
'rotateRight',
'myCustomButton',
],
customButtons: {
myCustomButton: {
text: 'custom!',
title: 'custom!',
click: function (context, e) {
alert('clicked the custom button!');
}
}
},
modalWidth: 400,
modalHeight: 400,
callbacks: {
beforeChange: function (context, index) {
console.log(context, index)
},
modalWidth: 400,
modalHeight: 400,
callbacks: {
beforeChange: function (context, index) {
console.log(context, index)
},
changed: function (context, index) {
console.log(context, index)
}
changed: function (context, index) {
console.log(context, index)
}
};

$('[data-gallery=photoviewer]').each(function () {
items.push({
src: $(this).attr('href'),
title: $(this).attr('data-title')
});
});
}
};

new PhotoViewer(items, options);

Expand Down
39 changes: 17 additions & 22 deletions examples/display-in-modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,28 @@ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="image-set">
<a data-gallery="photoviewer" data-title="Slipping Away by Jerry Fryer" data-group="a"
<a data-title="Slipping Away by Jerry Fryer"
href="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_z.jpg">
<img src="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_s.jpg" alt="">
</a>
<a data-gallery="photoviewer" data-title="Mi Fuego by albert dros" data-group="a"
<a data-title="Mi Fuego by albert dros"
href="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_z.jpg">
<img src="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_s.jpg" alt="">
</a>
<a data-gallery="photoviewer" data-title="Winter Fairytale by Achim Thomae"
data-group="a"
<a data-title="Winter Fairytale by Achim Thomae"
href="https://farm1.staticflickr.com/470/31340603494_fb7228020d_z.jpg">
<img src="https://farm1.staticflickr.com/470/31340603494_fb7228020d_s.jpg" alt="">
</a>

<a data-gallery="photoviewer"
href="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg"
<a href="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg"
data-group="b">
<img src="https://farm5.staticflickr.com/4267/34162425794_1430f38362_s.jpg" alt="">
</a>
<a data-gallery="photoviewer"
href="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_z.jpg"
<a href="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_z.jpg"
data-group="b">
<img src="https://farm1.staticflickr.com/4160/34418397675_18de1f7b9f_s.jpg" alt="">
</a>
<a data-gallery="photoviewer"
href="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg"
<a href="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg"
data-group="b">
<img src="https://farm1.staticflickr.com/512/32967783396_a6b4babd92_s.jpg" alt="">
</a>
Expand Down Expand Up @@ -106,23 +102,22 @@ <h4>Overflowing text to show scroll behavior</h4>
<script src="../dist/photoviewer.js"></script>
<script>
// initialize manually with a list of links
$('[data-gallery=photoviewer]').click(function (e) {
$('.image-set a').click(function (e) {

e.preventDefault();

var items = [],
options = {
index: $(this).index(),
appendTo: '.modal',
};

$('[data-gallery=photoviewer]').each(function () {
items.push({
src: $(this).attr('href'),
title: $(this).attr('data-title'),
});
var items = $('.image-set a').get().map(function (el) {
return {
src: $(el).attr('href'),
title: $(el).attr('data-title')
}
});

var options = {
index: $(this).index(),
appendTo: '.modal',
};

new PhotoViewer(items, options);

});
Expand Down
24 changes: 12 additions & 12 deletions examples/embed-without-popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@ <h4>Overflowing text to show scroll behavior</h4>
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<hr>
<div class="image-set">
<a data-gallery="photoviewer" data-title="Slipping Away by Jerry Fryer"
<a data-title="Slipping Away by Jerry Fryer"
href="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_z.jpg">
<img src="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_s.jpg" alt="">
</a>
<a data-gallery="photoviewer" data-title="Mi Fuego by albert dros"
<a data-title="Mi Fuego by albert dros"
href="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_z.jpg">
<img src="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_s.jpg" alt="">
</a>
<a data-gallery="photoviewer" data-title="Winter Fairytale by Achim Thomae"
<a data-title="Winter Fairytale by Achim Thomae"
href="https://farm1.staticflickr.com/470/31340603494_fb7228020d_z.jpg">
<img src="https://farm1.staticflickr.com/470/31340603494_fb7228020d_s.jpg" alt="">
</a>
Expand Down Expand Up @@ -108,6 +108,7 @@ <h4>Overflowing text to show scroll behavior</h4>
src: 'https://farm1.staticflickr.com/512/32967783396_a6b4babd92_z.jpg',
title: '3'
}];

var options = {
appendTo: '.container',
positionFixed: false,
Expand All @@ -124,23 +125,22 @@ <h4>Overflowing text to show scroll behavior</h4>
new PhotoViewer(items, options);

// initialize manually with a list of links
$('[data-gallery=photoviewer]').click(function (e) {
$('.image-set a').click(function (e) {
e.preventDefault();

var items = [];
var items = $('.image-set a').get().map(function (el) {
return {
src: $(el).attr('href'),
title: $(el).attr('data-title')
}
});

var options = {
index: $(this).index(),
positionFixed: false,
appendTo: '.container'
};

$('[data-gallery=photoviewer]').each(function () {
items.push({
src: $(this).attr('href'),
title: $(this).attr('data-title')
});
});

new PhotoViewer(items, options);
});

Expand Down
Loading

0 comments on commit 5e823cd

Please sign in to comment.