You are here

README.txt in PhotoSwipe 7.2

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

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


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

1. Download and install the "Libraries API" module: uncompress the "libraries"
folder, copy it to your "modules" directory, and enable it.
http://drupal.org/project/libraries

2. Place the "photoswipe" folder in your "modules" directory (e.g.
sites/all/modules/photoswipe).

3. Install third party PhotoSwipe software
     Download PhotoSwipe 4.x source from PhotoSwipe website
     (e.g. https://github.com/dimsemenov/PhotoSwipe/archive/v4.0.5.zip)
     Unarchive it into your "libraries" directory (e.g. sites/all/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.

4. 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>
It might be needed to load photoswipe assets in case they are not already loaded
To do so just call
photoswipe_load_assets();
Or force them to load on all non-admin pages
variable_set('photoswipe_always_load_non_admin', TRUE);

File

README.txt
View source
  1. DESCRIPTION
  2. ===========
  3. jQuery-based lightbox library offers very nice mobile browsing features (in
  4. particular swiping to the next picture)!
  5. INSTALLATION
  6. ============
  7. 1. Download and install the "Libraries API" module: uncompress the "libraries"
  8. folder, copy it to your "modules" directory, and enable it.
  9. http://drupal.org/project/libraries
  10. 2. Place the "photoswipe" folder in your "modules" directory (e.g.
  11. sites/all/modules/photoswipe).
  12. 3. Install third party PhotoSwipe software
  13. Download PhotoSwipe 4.x source from PhotoSwipe website
  14. (e.g. https://github.com/dimsemenov/PhotoSwipe/archive/v4.0.5.zip)
  15. Unarchive it into your "libraries" directory (e.g. sites/all/libraries).
  16. You may need to create the "libraries" directory first.
  17. Rename it to "photoswipe" (lower case).
  18. NB: Relying on libraries module to locate 'photoswipe' folder allows you to place
  19. it in a site specific (e.g. sites/mysite/libraries) or default folder
  20. (e.g. sites/all/libraries). Site-specific versions are selected preferentially.
  21. 4. Enable the PhotoSwipe module.
  22. USAGE
  23. =====
  24. 1. Multiple images in nodes
  25. After adding an image field to any content type (e.g. 'article'), you can select
  26. 'PhotoSwipe: Preset1 to Preset2' as a display mode in Structure >> Content types
  27. >> MyContentType in the tab 'Manage display'. All possible
  28. combinations of image styles are proposed.
  29. 2. Multiple images in Views
  30. To use photoswipe in views you must add a custom CSS class called
  31. 'photoswipe-gallery'.
  32. Fields >> Content: Image >> Style settings >> check Customize field and label
  33. wrapper HTML >> Wrapper HTML element (leave default) >> check Create a CSS class
  34. >> add as CSS class 'photoswipe-gallery'.
  35. It is NOT recommended to add the CSS class to Advanced >> Other >> CSS class in
  36. a View since there are known issues with the ajax pager.
  37. 3. Single image in node
  38. To load a single image in node you must add data-size="widthxheight"
  39. (the exact size of the image) and the class="photoswipe" to display it properly.
  40. e.g.
  41. Test Image
  42. It might be needed to load photoswipe assets in case they are not already loaded
  43. To do so just call
  44. photoswipe_load_assets();
  45. Or force them to load on all non-admin pages
  46. variable_set('photoswipe_always_load_non_admin', TRUE);