Magnify

Examples

All the pictures come from Flickr website, copyright to the original author. You can play the following example by changing themes and options in the playground. Besides, examples collection can be found on CodePen.

default theme bezelless theme white theme

Options Generator

draggable

{{options.draggable}}

resizable

{{options.resizable}}

movable

{{options.movable}}

keyboard

{{options.keyboard}}

title

{{options.title}}

multiInstances

{{options.multiInstances}}

fixedContent

{{options.fixedContent}}

fixedModalPos

{{options.fixedModalPos}}

fixedModalSize

{{options.fixedModalSize}}

modalWidth

modalHeight

gapThreshold

zIndex

dragHandle

magnify-modal

magnify-header

ratioThreshold

minRatio

maxRatio

headerToolbar

minimize

maximize

close

footerToolbar

zoomIn

zoomOut

prev

fullscreen

next

actualSize

rotateRight

rotateLeft

initMaximized

{{options.initMaximized}}

initAnimation

{{options.initAnimation}}

initEvent

click

dblclick

icons

{...}

i18n

{...}

callbacks

{...}

progressiveLoading

{{options.progressiveLoading}}

Usage

The usage of magnify is very simple.

1.Include files

<link href="/path/to/magnify.css" rel="stylesheet">

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

The icons in magnify use svg default, you can customize them in options.

2.Html structure

The default structure as below:

<a data-magnify="gallery" href="big-1.jpg">
  <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg">
  <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg">
  <img src="small-3.jpg">
</a>

or

<img data-magnify="gallery" data-src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" data-src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" data-src="big-3.jpg" src="small-3.jpg">

All structures above have optional attributes as below:

• Add a data-src attribute to link big image if you do not want to use a <a> tag. If you use it in a <a> tag, it will override the image link in href attribute.
• Add a data-caption attribute if you want to show a caption. If you are not using this attribute, it will show the image name in the url when you set the title option true.
• Add a data-group attribute if you want to set the images in groups.

3.Call plugin

If you add a data-magnify attribute, you can write none of js.

Of course, you can use selector to call the plugin as following code:

$('[data-magnify=gallery]').magnify(options);

Options

$('[data-magnify=gallery]').magnify({
  footerToolbar: [
    ...
    'myCustomButton'
  ],
  customButtons: {
    myCustomButton: {
      text: 'custom!',
      title: 'custom!',
      click: function (context, e) {
        alert('clicked the custom button!');
      }
    }
  }
});

Events

You can define callbacks in callbacks option. In each callback you can get the Magnify instance with this or context.

$("[data-magnify=gallery]").magnify({
  callbacks: {
    beforeOpen: function(context){
      // Will fire before modal is opened
    },
    opened: function(context){
      // Will fire after modal is opened
    },
    beforeClose: function(context){
      // Will fire before modal is closed
    },
    closed: function(context){
      // Will fire after modal is closed
    },
    beforeChange: function(context, index){
      // Will fire before image is changed
      // The argument index is the current image index of image group
    },
    changed: function(context, index){
      // Will fire after image is changed
      // The argument index is the next image index of image group
    }
  }
});

Bugs & Contributing

Please report bugs via GitHub if you think you might have found a bug or if you have a feature suggestion.