You are here

README.txt in PhotoSwipe 3.x

Same filename and directory in other branches
  1. 8.2 README.txt
  2. 8 README.txt
  3. 6 README.txt
  4. 7.2 README.txt
  5. 7 README.txt
DESCRIPTION
===========

Javascript lightbox library offers very nice mobile browsing features (in
particular swiping to the next picture)!


INSTALLATION
============

1. Download and install this module as usual. For more info visit
  https://www.drupal.org/documentation/install/modules-themes/modules-8

2. Install third party PhotoSwipe software:
  Download PhotoSwipe 4.x source from PhotoSwipe website
  (e.g. https://github.com/dimsemenov/PhotoSwipe/archive/v4.1.0.zip)
  Unarchive it into your "libraries" directory (e.g. /libraries).
  You may need to create the "libraries" directory first.
  Rename it to "photoswipe" (lower case).
  NB: Relying on libraries module to locate 'photoswipe' folder allows you to
  place it in a site specific (e.g. sites/mysite/libraries) or default folder
  (e.g.sites/all/libraries). Site-specific versions are selected preferentially.

3. Enable the PhotoSwipe module.


USAGE
=====

1. Multiple images in nodes
After adding an image field to any content type (e.g. 'article'), you can select
'PhotoSwipe: Preset1 to Preset2' as a display mode in Structure >> Content types
>> MyContentType in the tab 'Manage display'. All possible
combinations of image styles are proposed.

2. Multiple images in Views
To use photoswipe in views you must add a custom CSS class called
'photoswipe-gallery'.
Add the CSS class to Advanced >> Other >> CSS class
in the view settings (bottom right).

3. Single image in node
To load a single image in node you must add data-size="widthxheight"
(the exact size of the image) and the class="photoswipe" to display it properly.
e.g.
<a href="/images/test_img.png" class="photoswipe" data-size="640x400">
 <img src="/images/test_img.png" alt="Test Image" />
</a>
Doing this means that you should probably enable loading the library on all non
admin pages in admin/config/media/photoswipe.

File

README.txt
View source
  1. DESCRIPTION
  2. ===========
  3. Javascript lightbox library offers very nice mobile browsing features (in
  4. particular swiping to the next picture)!
  5. INSTALLATION
  6. ============
  7. 1. Download and install this module as usual. For more info visit
  8. https://www.drupal.org/documentation/install/modules-themes/modules-8
  9. 2. Install third party PhotoSwipe software:
  10. Download PhotoSwipe 4.x source from PhotoSwipe website
  11. (e.g. https://github.com/dimsemenov/PhotoSwipe/archive/v4.1.0.zip)
  12. Unarchive it into your "libraries" directory (e.g. /libraries).
  13. You may need to create the "libraries" directory first.
  14. Rename it to "photoswipe" (lower case).
  15. NB: Relying on libraries module to locate 'photoswipe' folder allows you to
  16. place it in a site specific (e.g. sites/mysite/libraries) or default folder
  17. (e.g.sites/all/libraries). Site-specific versions are selected preferentially.
  18. 3. Enable the PhotoSwipe module.
  19. USAGE
  20. =====
  21. 1. Multiple images in nodes
  22. After adding an image field to any content type (e.g. 'article'), you can select
  23. 'PhotoSwipe: Preset1 to Preset2' as a display mode in Structure >> Content types
  24. >> MyContentType in the tab 'Manage display'. All possible
  25. combinations of image styles are proposed.
  26. 2. Multiple images in Views
  27. To use photoswipe in views you must add a custom CSS class called
  28. 'photoswipe-gallery'.
  29. Add the CSS class to Advanced >> Other >> CSS class
  30. in the view settings (bottom right).
  31. 3. Single image in node
  32. To load a single image in node you must add data-size="widthxheight"
  33. (the exact size of the image) and the class="photoswipe" to display it properly.
  34. e.g.
  35. Test Image
  36. Doing this means that you should probably enable loading the library on all non
  37. admin pages in admin/config/media/photoswipe.