MediaSwipev.05.04.2017

MediaSwipe

Introducing a beautiful and lightweight media gallery for the web & mobile.

Fork on GitHub

Setup

Include the MediaSwipe script and stylesheet files in your project. Then give any item you want to expand in a gallery the class js-mediaSwipe.

You do not need to write any Javascript. MediaSwipe will automatically listen for click events with any element with class js-mediaSwipe.

IMPORTANT: Every item needs to have href or data-image values specified in order for MediaSwipe to recognize what file to open.


<a href="album1/image1.jpg" class="js-mediaSwipe">Image 1</a>

<a href="album1/image2.jpg" class="js-mediaSwipe">Image 2</a>

<a href="album1/image3.jpg" class="js-mediaSwipe">Image 3</a>

<a href="album1/image4.jpg" class="js-mediaSwipe">Image 4</a>

<button class="js-mediaSwipe" data-image="album1/image5.jpg">Image 5</button>


Multiple Galleries & Captions

Use the data-rel attribute to denote each item into separate galleries.
Enter captions with data-caption attribute.


<a href="album2/image1.jpg" class="js-mediaSwipe" data-rel="gallery2" data-caption="On desktop you can use the arrow keys or press escape.">
  <img src="album2/image1_thumb.jpg" alt="" />
</a>

<a href="album2/image2.jpg" class="js-mediaSwipe" data-rel="gallery2" data-caption="All photos have been provided by https://unsplash.com">
  <img src="album2/image2_thumb.jpg" alt="" />
</a>


Supported Media

MediaSwipe supports images, YouTube videos, and iFrames. To include a YouTube video, be sure to use the embed URL, like so:
https://www.youtube.com/embed/the-video-id.

View the table below in order to include the correct attributes for your items to work.

Image Type Required Attributes
Image href or data-image
YouTube Video href or data-image
https://www.youtube.com/embed/the-video-id
iFrame href or data-image

<!-- Image ('href' OR 'data-image' required )-->
<a href="album1/image1.jpg" class="js-mediaSwipe" data-rel="gallery3">Image</a><br/><br/>

<!-- YouTube ('href' OR 'data-image' https://www.youtube.com/embed/the-video-id  -->
<a href="https://www.youtube.com/embed/Scxs7L0vhZ4" class="js-mediaSwipe" data-rel="gallery3">YouTube Video</a><br/><br/>

<!-- iFrame ('href' OR 'data-image' required ONLY) -->
<a href="iframetest.html" class="js-mediaSwipe" data-rel="gallery3">iFrame</a>


Auto Launch

MediaSwipe will auto launch on page load if there is a fragment identifier in the URL.

The frament identifier must be #view=gallery-name,gallery-index. Where gallery-name is the data-rel of a group of images and gallery-index is the index to play (starting at 0).

An example is index.html#view=gallery2,2.
Another example is index.html#view=top-gallery.



Launch Gallery 2

Auto Play Video (A single video in a gallery will autoplay)

<a href="index.html#view=gallery2,2" target="_blank">Auto Play Gallery</a><br/><br/>

<!-- Autoplay A Video -->
<a href="https://www.youtube.com/embed/Scxs7L0vhZ4" data-rel="my-video" class="js-mediaSwipe" style="display:none;" ></a>
<a href="index.html#view=my-video" target="_blank">Auto Play Video</a>

Attributes

Use these attributes on your js-mediaSwipe element:

Attribute Description
href, data-image The image or media to display on click.
data-rel Items that share the same value are grouped together.
data-caption The caption to be displayed below the image or media.
data-width, data-height Specify the width and height of an image or media type. You can usually omit these values.

FAQs

MediaSwipe is not working! 1. Do you have mediaswipe.js and mediaswipe.css included in your project?
2. Is the item you are clicking on have class "js-mediaSwipe"? (case-sensitive!)
3. Does the item have a correct href or data-rel attribute?
4. Is the path to the image correct?
5. Do you have any console errors being thrown?
Can I send someone a URL to my site that goes directly to a gallery image? Yes! Make sure you append #view=your-gallery-name,image-index. See Auto Launch above.
How can I launch the gallery using jQuery? Use the click() function to set an event on one of your js-mediaSwipe elements.
MediaSwipe doesn't look right on my website! If MediaSwipe looks wrong, there is a good chance you have styles on your page that are too generic and are conflicting with MediaSwipe.
Can I change the appearance of MediaSwipe? Yes you can! Just use CSS to over-ride it's default styles.