You are here

README.txt in PhotoSwipe 8

Same filename and directory in other branches
  1. 8.2 README.txt
  2. 6 README.txt
  3. 7.2 README.txt
  4. 7 README.txt
  5. 3.x 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'.
Fields >> Content: Image >> Style settings >> check Customize field and label
wrapper HTML >> Wrapper HTML element (leave default) >> check Create a CSS class
>> add as CSS class 'photoswipe-gallery'.
It is NOT recommended to add the CSS class to Advanced >> Other >> CSS class in
a View since there are known issues with the ajax pager.

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. Fields >> Content: Image >> Style settings >> check Customize field and label
  30. wrapper HTML >> Wrapper HTML element (leave default) >> check Create a CSS class
  31. >> add as CSS class 'photoswipe-gallery'.
  32. It is NOT recommended to add the CSS class to Advanced >> Other >> CSS class in
  33. a View since there are known issues with the ajax pager.
  34. 3. Single image in node
  35. To load a single image in node you must add data-size="widthxheight"
  36. (the exact size of the image) and the class="photoswipe" to display it properly.
  37. e.g.
  38. Test Image
  39. Doing this means that you should probably enable loading the library on all non
  40. admin pages in admin/config/media/photoswipe.