You are here

Home » API reference » PhotoSwipe 8

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. 

  4. Javascript lightbox library offers very nice mobile browsing features (in

  5. particular swiping to the next picture)!

  6. 

  7. 

  8. INSTALLATION

  9. ============

  10. 

  11. 1. Download and install this module as usual. For more info visit

  12.   https://www.drupal.org/documentation/install/modules-themes/modules-8

  13. 

  14. 2. Install third party PhotoSwipe software:

  15.   Download PhotoSwipe 4.x source from PhotoSwipe website

  16.   (e.g. https://github.com/dimsemenov/PhotoSwipe/archive/v4.1.0.zip)

  17.   Unarchive it into your "libraries" directory (e.g. /libraries).

  18.   You may need to create the "libraries" directory first.

  19.   Rename it to "photoswipe" (lower case).

  20.   NB: Relying on libraries module to locate 'photoswipe' folder allows you to

  21.   place it in a site specific (e.g. sites/mysite/libraries) or default folder

  22.   (e.g.sites/all/libraries). Site-specific versions are selected preferentially.

  23. 

  24. 3. Enable the PhotoSwipe module.

  25. 

  26. 

  27. USAGE

  28. =====

  29. 

  30. 1. Multiple images in nodes

  31. After adding an image field to any content type (e.g. 'article'), you can select

  32. 'PhotoSwipe: Preset1 to Preset2' as a display mode in Structure >> Content types

  33. >> MyContentType in the tab 'Manage display'. All possible

  34. combinations of image styles are proposed.

  35. 

  36. 2. Multiple images in Views

  37. To use photoswipe in views you must add a custom CSS class called

  38. 'photoswipe-gallery'.

  39. Fields >> Content: Image >> Style settings >> check Customize field and label

  40. wrapper HTML >> Wrapper HTML element (leave default) >> check Create a CSS class

  41. >> add as CSS class 'photoswipe-gallery'.

  42. It is NOT recommended to add the CSS class to Advanced >> Other >> CSS class in

  43. a View since there are known issues with the ajax pager.

  44. 

  45. 3. Single image in node

  46. To load a single image in node you must add data-size="widthxheight"

  47. (the exact size of the image) and the class="photoswipe" to display it properly.

  48. e.g.

  49. 

  50.  Test Image

  51. 

  52. Doing this means that you should probably enable loading the library on all non

  53. admin pages in admin/config/media/photoswipe.