Follow

Tap for Full Screen Images

The Pugpig Readers support the ability to tap an image to go full screen. There are two modes for this.

Automatic tap-to-fullscreen

Automatic tap-to-fullscreen is enabled by setting the page control's imageViewingEnabled property with[pageControl setImageViewingEnabled:YES].

If the client is configured to automatically enable the ability for all figures, you need to supply a <figure> element that contains an optional caption (using <figcaption>) and optional credit (using <p class=“copyright”>) as shown below.

 <figure id="fig1">
      <img src="images/test.jpg" />
      <figcaption>This is a test image</figcaption>
      <p class="copyright">Reuters</p>
  </figure>

You can tell Pugpig to exclude a figure from the full screen list by adding a data-image-nozoom attribute:

 <figure data-image-nozoom>
      <img src="images/test.jpg" />
      <figcaption>This is a test image which will not tap to fullscreen...</figcaption>
      <p class="copyright">Reuters</p>
  </figure>

Fullscreen slideshows

If you have multiple figures on the page, you can group them into slideshows. When in full-screen mode, you can swipe between all the images on the page that are in the same slideshow. Images are grouped using the data-image-group attribute:

 <figure data-image-group="group1">
      <img src="images/test1.jpg" />
      <figcaption>Image in slideshow 1</figcaption>
      <p class="copyright">Reuters</p>
  </figure>
 <figure data-image-group="group1">
      <img src="images/test2.jpg" />
      <figcaption>Image in slideshow 1</figcaption>
      <p class="copyright">Reuters</p>
  </figure>
 <figure data-image-group="group2">
      <img src="images/test3.jpg" />
      <figcaption>Image in slideshow 2</figcaption>
      <p class="copyright">Reuters</p>
  </figure>
 <figure data-image-group="group2">
      <img src="images/test4.jpg" />
      <figcaption>Image in slideshow 2</figcaption>
      <p class="copyright">Reuters</p>
  </figure>

All of the images don't need to be visible - as long as they're in the DOM, Pugpig will find them. This is a useful feature if you want a single image to open up into a full-screen slideshow, even if the other images in the slideshow aren't visible on the page.

Manual tap-to-fullscreen

If you wish to manually control which figures have the touch-for-fullscreen ability, you should ensure the page control's imageViewingEnabled property has been cleared with [pageControl setImageViewingEnabled:NO]. You need to include an onImageClick url as shown below.

 <figure id="fig1">
    <a href="pugpig://onImageClick/fig1">
      <img src="images/test.jpg" />
      <figcaption>This is a test image</figcaption>
      <p class="copyright">Reuters</p>
    </a>
  </figure>

If you are doing it manually, you must ensure an element wrapping the image has a matching id as this is how Pugpig locates the image. If you do not want to wrap your images in figure tags then simply put the id on to the anchor tag.

Manual tap-to-fullscreen and Fullscreen slideshows

So, if we want to both manually control the touch-for-fullscreen ability and enable fullscreen sliding, each of the <figure> elements belonging to the gallery in question will need to have a common data-image-group attribute, as well as the unique image id found at the end of the link <a> url:

<figure data-image-group="grp-a" id="fig1">
 <a href="pugpig://onImageClick/fig1">
  <img src="IMG_1.jpg" alt=""/>
 </a>
 <figcaption>Figcaption</figcaption>
 <p class="copyright">Credit/Copyright</p>
</figure>
<figure data-image-group="grp-a" id="fig2">
 <a href="pugpig://onImageClick/fig2">
  <img src="IMG_2.JPG" alt=""/>
 </a>
 <figcaption>Figcaption</figcaption>
 <p class="copyright">Credit/Copyright</p>
</figure>

This manual tap to full-screen method also allows you to wrap the anchor around a different element - rather than the image. This means you could hide the image in the HMTL (using width=“0” and height=“0”) but still launch the full screen view or even a gallery from an icon or text etc.

EG:

<figure data-image-group="grp-a" id="fig1"> 
  <a href="pugpig://onImageClick/fig1">
    <p>CLICK</p>
  </a>
  <img src="image.jpg" alt=""/>
  <figcaption>Figcaption</figcaption>
  <p class="copyright">Credit/Copyright</p>
</figure>
<figure data-image-group="grp-a" id="fig2">
  <a href="pugpig://onImageClick/fig2">
    <p>GO!</p>
  </a>
  <img src="another_image.jpg" alt=""/>
  <figcaption>Figcaption</figcaption>
  <p class="copyright">Credit/Copyright</p>
</figure>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk