MediaSwipev.10.08.2018

MediaSwipe

MediaSwipe on GitHub

Setup

Include the MediaSwipe script and stylesheet files in your project. Then give any item you want to expand in the 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 & Vimeo videos, iframes, and custom HTML. 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
Vimeo Video href or data-image
https://player.vimeo.com/video/the-video-id
iFrame href or data-image
HTML data-html points to an ID of an element to duplicate it's html

<!-- 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/>

<!-- Vimeo ('href' OR 'data-image' https://player.vimeo.com/video/the-video-id  -->
<a href="https://player.vimeo.com/video/119811742" 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>


Custom HTML

Use the data-html attribute to point to an id of an element to display it's inner html.




<button class="js-mediaSwipe" data-html="myBox" data-rel="html-example" type="button">Open HTML</button>



<div id="myBox" style="display:none;">
    <div style="background-color:#fff;border-radius:12px;padding:30px;">
        <h5 style="font-size:28px;color:#f00;margin-bottom:40px;">This is my popup box</h5>
        <p>This is an example of some custom HTML</p>
    </div>
</div>

Launch With Javascript

You can manually launch MediaSwipe using mediaswipe.open()


mediaswipe.open({
    type : 'html',
    html : '<div style="background-color:#fff;padding:50px;border-radius:8px;"><h5>Hello There</h5></div>',
    caption : 'Custom HTML',
    
    onReady : function() {
        console.log('MediaSwipe Opened');
    },
    onClose : function() {
        console.log('You closed MediaSwipe');
    }
});

Launch With Javascript - Multiple Items

You can add multiple items with the gallery property set.


mediaswipe.open({
    gallery : [
        {
            type : 'html',
            html : '<div style="background-color:#fff;padding:50px;border-radius:8px;"><h5>Hello There</h5></div>',
            caption : 'Custom HTML'
        },
        {
            type : 'image',
            src : 'album1/image9.jpg',
            caption : 'Lorem Ipsum Image'
        },
        {
            type : 'iframe',
            src : 'https://player.vimeo.com/video/119811742',
            caption : 'Vimeo Player'
        },
        {
            type : 'youtube',
            src : 'https://www.youtube.com/embed/Scxs7L0vhZ4',
            caption : 'YouTube Player'
        }
    ],
    
    onReady : function() {
        console.log('MediaSwipe Opened');
    },
    onClose : function() {
        console.log('You closed MediaSwipe');
    }
});

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.
data-html Must be an id of an element and will grab the element's inner HTML to be displayed.
data-addClass Adds a class name to #mediaswipe-container when this item is viewed. You can create different UI styles for different media types.
data-animate "fade-up", "fade-down", "fade-left", "fade-right" - adds a slight animation when MediaSwipe is first launched ON THIS ITEM.
data-closeInFrame Keeps the close button within the top-right corner of the frame of THIS ITEM.
data-fullscreen="true" Makes the HTML, VIDEO, or IFRAME fit the borders of the window without compromising it's ratio.