docs upd (broken unsplash images)

dimsemenov · Jul 18, 2024 · d80c32a · d80c32a
1 parent fd85184
commit d80c32a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 40 deletions.
diff --git a/docs/data-sources.md b/docs/data-sources.md
@@ -27,14 +27,14 @@ const options = {
 
     // simple image
     {
-      src: 'https://source.unsplash.com/Volo9FYUAzU/1620x1080',
+      src: 'https://dummyimage.com/1620x1080/555/fff/?text=1620x1080',
       width: 1620,
       height: 1080,
       alt: 'test image 1'
     },
 
     {
-      src: 'https://source.unsplash.com/RJzHlbKf6eY/1950x1300',
+      src: 'https://dummyimage.com/1950x1300/555/fff/?text=1950x1300',
       width: 1950,
       height: 1300,
       alt: 'test image 2'
@@ -102,14 +102,14 @@ const options = {
 
     // simple image
     {
-      src: 'https://source.unsplash.com/Volo9FYUAzU/1620x1080',
+      src: 'https://dummyimage.com/1620x1080/555/fff/?text=1620x1080',
       width: 1620,
       height: 1080,
       alt: 'test image 1'
     },
 
     {
-      src: 'https://source.unsplash.com/RJzHlbKf6eY/1950x1300',
+      src: 'https://dummyimage.com/1950x1300/555/fff/?text=1950x1300',
       width: 1950,
       height: 1300,
       alt: 'test image 2'

diff --git a/docs/native-fullscreen-on-open.md b/docs/native-fullscreen-on-open.md
@@ -140,26 +140,26 @@ function getContainer() {
 
 ```html pswpcode
 <div class="pswp-gallery" id="gallery--native-fs">
-<a href="https://dummyimage.com/1500x1000/555/fff/?text=1st-1500x1000" 
+<a href="https://dummyimage.com/1500x1000/555/fff/?text=1-1500x1000" 
     data-pswp-srcset="
-      https://dummyimage.com/1500x1000/555/fff/?text=1st-1500x1000 1500w,
-      https://dummyimage.com/1200x800/555/fff/?text=1st-1200x800 1200w,
-      https://dummyimage.com/600x400/555/fff/?text=1st-600x400 600w,
-      https://dummyimage.com/300x200/555/fff/?text=1st-300x200 300w" 
+      https://dummyimage.com/1500x1000/555/fff/?text=1-1500x1000 1500w,
+      https://dummyimage.com/1200x800/555/fff/?text=1-1200x800 1200w,
+      https://dummyimage.com/600x400/555/fff/?text=1-600x400 600w,
+      https://dummyimage.com/300x200/555/fff/?text=1-300x200 300w" 
     data-pswp-width="1500" 
     data-pswp-height="1000"
     target="_blank">
-    <img src="https://dummyimage.com/300x200/555/fff/?text=1st" alt="">
+    <img src="https://dummyimage.com/300x200/555/fff/?text=1" alt="">
   </a>
 
-  <a href="https://source.unsplash.com/Volo9FYUAzU/1620x1080" data-pswp-width="1620" data-pswp-height="1080" data-cropped="true" target="_blank">
-    <img src="https://source.unsplash.com/Volo9FYUAzU/162x108" alt="" />
+  <a href="https://dummyimage.com/1620x1080/555/fff/?text=2-1620x1080" data-pswp-width="1620" data-pswp-height="1080" target="_blank">
+    <img src="https://dummyimage.com/162x108/555/fff/?text=2" alt="" />
   </a>
-  <a href="https://source.unsplash.com/WLUHO9A_xik/1600x900" data-pswp-width="1600" data-pswp-height="900" data-cropped="true" target="_blank">
-    <img src="https://source.unsplash.com/WLUHO9A_xik/160x90" alt="" />
+  <a href="https://dummyimage.com/1600x900/555/fff/?text=3-1600x900" data-pswp-width="1600" data-pswp-height="900"  target="_blank">
+    <img src="https://dummyimage.com/160x90/555/fff/?text=3" alt="" />
   </a>
-  <a href="https://source.unsplash.com/RJzHlbKf6eY/1950x1300" data-pswp-width="1950" data-pswp-height="1300" data-cropped="true" target="_blank">
-    <img src="https://source.unsplash.com/RJzHlbKf6eY/195x130" alt="" />
+  <a href="https://dummyimage.com/1950x1300/555/fff/?text=4-1950x1300" data-pswp-width="1950" data-pswp-height="1300"target="_blank">
+    <img src="https://dummyimage.com/195x130/555/fff/?text=4" alt="" />
   </a>
 </div>
 ```

diff --git a/docs/styling.md b/docs/styling.md
@@ -15,7 +15,7 @@ To modify the color of the icons use CSS variables. To modify SVG shapes use JS
 
 For example:
 
-<PswpCodePreview>
+<PswpCodePreview numItems="4" galleryID="custom-icon-colors">
 
 ```js pswpcode
 import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
@@ -44,29 +44,6 @@ lightbox.init();
 }
 ```
 
-```html pswpcode
-<div class="pswp-gallery" id="gallery--custom-icon-colors">
-  <a href="https://source.unsplash.com/Volo9FYUAzU/1620x1080" 
-    data-pswp-width="1620" 
-    data-pswp-height="1080" 
-    target="_blank">
-    <img src="https://source.unsplash.com/Volo9FYUAzU/162x108" alt="" />
-  </a>
-  <a href="https://source.unsplash.com/WLUHO9A_xik/1600x900" 
-    data-pswp-width="1600" 
-    data-pswp-height="900" 
-    target="_blank">
-    <img src="https://source.unsplash.com/WLUHO9A_xik/160x90" alt="" />
-  </a>
-  <a href="https://source.unsplash.com/RJzHlbKf6eY/1950x1300" 
-    data-pswp-width="1950" 
-    data-pswp-height="1300" 
-    target="_blank">
-    <img src="https://source.unsplash.com/RJzHlbKf6eY/195x130" alt="" />
-  </a>
-</div>
-```
-
 </PswpCodePreview>
 
 - Use SVGO to optimize icons. ([SVGOMG online tool](https://jakearchibald.github.io/svgomg/)).