Magneticmediajs - Display Media Content In A Stylish Overlay Fashion

Magneticmediajs is a JavaScript jQuery based library that will allow your media content (images, videos, maps, HTML & more) to be displayed in a memorable way to your audience. Don't just let your videos or photos on the side of your site or application: we built Magneticmediajs to make your media content easly and rapidlt accesible to your users.

Magneticmediajs is mobile first project. It was built to run on most modern internet connected devices (iOS, Android, Desktop and other devices) through the use of the latest responsive, JavaScript & CSS3 techniques with fallbacks for older devices where possible.

It will take input from popular platforms like Youtube, Vimeo, Instagram, Flickr, Dailymotion

Supported devices and browsers

We have taken time to test Magneticmediajs so that your audience can get a top-notch experience on as much devices and browsers as possible. Below is a list of browsers and systems where we know Magneticmediajs will work at its best. We welcome feedback so use our contact form to get in touch or provide bug reports.

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: magneticmediajs.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="css/mmjs-1.1.0.css"  />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="js/mmjs-1.1.0.min.js"></script>

2. HTML

Add HTML element with id to DOM

The id will reference on which element to fire Magneticmediajs. Magneticmediajs supports multiple instances so you can have multiple items on the same page with different options.

<div id="itemToDisplay">Check This View</div>

3. JAVASCRIPT

$(document).ready(function() {
	$('#imageToDisplay').magneticmediajs({
		color1:'000000',
		color2:'EEEEEE',
		borderWidth:8,
		borderRadius:8,
		background:'000000',
		backgroundOpacity:0.8,
		displayTitle:true,
		data:[
			['image','images/london1.jpg','Big Ben - London - United Kingdom'],
		]
	});
});

4. OPTIONS

color1:'080808'

color2:'fdfdfd'

borderWidth:8

borderRadius:8

background:'000000'

backgroundOpacity:0.7

displayTitle:true

data:[
 ['image','image.jpg','title']
]

data:[
	['image','image.jpg']
]

Advanced options - Pro edition and above

videoWidth:960

videoHeight:360

autoPlayVideo:true

sharing:true

facebookID:XXXXXXXXXX

showIcons:true

gallery:true

galleryMaxThumbnailHeight:150

mediaWall:true

mediaWallBorder:2

mediaWallColumns:4

zoomOn:true

zoomLevel:2

zoomType:'lens'

zoomSize:200

Responsive design note: the media gallery and the media wall parent element must be responsive for them to be responsive. For example you can set the width or the parent element in %

Media content as an input - the data array

Data array supported type & structure

data:[
      ['image','image.jpg']
]

data:[
      ['flickr','124135045@N03','london1']
]

data:[
['instagram','http://instagram.com/p/q1vsU0OmxC/']
]

data:[
      ['video','movie.mp4']
]

data:[
      ['youtube','OG-pyPSzIO0']
]

data:[
      ['vimeo','44964114']
]

data:[
      ['dailymotion','x1yj6t9']
]

data:[
      ['html','<iframe src="http://"></iframe>']
]

data:[
['html-js','<div style="">Hello World!</div>',
'alert("Some JavaScript code was executed");']
]

data:[
['maps','AIzaSyBUoQMtQL-nT1t2DyY-vLWf4j3oIh850Zw',
43.526112, 5.440660, 7,
 'This is a great place',
 '<div>
 Meet us there!</div>']
]

Note: an example of implementation for single items is available in demo-single-item.html which is included with each purchase (in your downloaded package)

Data array structure for Media gallery & Media wall

You need to specify information for the thumbnails as follows:

data:[
      ['image','thumbnail.jpg','image.jpg']
]

data:[
      ['flickr','124135045@N03','london1']
]

data:[
['instagram','http://instagram.com/p/q1vsU0OmxC/',
'http://instagram.com/p/q1vsU0OmxC/']
]

data:[
      ['video',thumbnail.jpg','movie.mp4']
]

data:[
      ['youtube','medium','OG-pyPSzIO0']
]

data:[
      ['vimeo','medium','44964114']
]

data:[
      ['dailymotion','medium','x1yj6t9']
]

data:[
['html',thumbnail.jpg',
'<iframe src="http://www.html5rocks.com/en/"></iframe>']
]

data:[
['html-js','thumbnail.jpg',
'<div style="">Hello World!</div>',
'alert("Some JavaScript code was executed");']
]

data:[
['maps',thumbnail.jpg',
'AIzaSyBUoQMtQL-nT1t2DyY-vLWf4j3oIh850Zw',
 43.526112, 5.440660, 7,
 'This is a great place',
 '<div> Meet us there!</div>']
]

Note: examples of implementation for Media gallery and Media wall are available in demo-gallery.html and demo-mediawall.html which are included with each purchase (in your downloaded package)

5. API

Variables

You check if an item is on stage (an item has been interacted with by a user and is currently displayed) at any moment with the variable mmItemOnStage. mmItemOnStage is of type Boolean

if(mmItemOnStage){
//an item is displayed on stage
}

To check what is the id of the item on stage you can use

$('.mmFullScreen').children().first().attr('id')

Methods

Open an item: mmjsOpen

For a single item. Example: open item with id singleItem

$('#singleItem').magneticmediajs('mmjsOpen','singleItem');

For an item within media gallery or media wall. Example: open item 4 (first item has id mm0)

$('#gallery').magneticmediajs('mmjsOpen','mm3');

The first paramater is the name of the invoked method - in this case mmjsOpen - the second parameter is the id of the item to open.

Close an item: mmjsClose

$('#gallery').magneticmediajs('mmjsClose');

The first paramater is the name of the invoked method - in this case mmjsClose

Display previous item: mmjsPrevious

$('#gallery').magneticmediajs('mmjsPrevious');

The first paramater is the name of the invoked method - in this case mmjsPrevious

Display next item: mmjsNext

$('#gallery').magneticmediajs('mmjsNext');

The first paramater is the name of the invoked method - in this case mmjsNext

Deeplinking

If you use the media gallery or the media wall each item can be accessed with a single URL. Just add the magnetid query string as follows:

http://<yoururl>/index.html?magnetid=mm0

This will display your first item in your data array (index starts at 0).

Each item in the media gallery or media wall can be accessed with magnetid query string equal to mmi where i corresponds to the index of the item in the data array.

If you use a single item you can access this item through a single URL as follows:

http://<yoururl>/index.html?magnetid=mmelementid

Where elementid is the id of your html element on which magneticmediajs is fired.

7. KEYBOARD CONTROL

Open a media item: Spacebar (Key code 32)

Close a media item: Esc (Key code 27)

Display previous media item: Left Arrow (Key code 37)

Display next media item: Right Arrow (Key code 39)