Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://AndersDJohnson.github.io/magnificent.js/examples/demo/index-data.html below:

Magnificent.js Demo

<div data-mag-thumb="inner">
  <img src="img/canyon/500x300.jpg" />
</div>
<div data-mag-zoom="inner">
  <img src="img/canyon/2000x1200.jpg" />
</div>

$host = $('[mag-thumb="inner"]');
$host.mag();

<div data-mag-thumb="inner-inline" data-mag-flow="inline">
  <img src="img/canyon/500x300.jpg" style="width: 400px; max-width:100%;" />
</div>
<div data-mag-zoom="inner-inline">
  <img src="img/canyon/2000x1200.jpg" />
</div>

$host = $('[mag-thumb="inner-inline"]');
$host.mag();

<div data-mag-thumb="outer">
  <img src="img/canyon/500x300.jpg" />
</div>
<div style="width: 300px; height: 300px;">
  <div data-mag-zoom="outer">
    <img src="img/canyon/2000x1200.jpg" />
  </div>
</div>

$host = $('[mag-thumb="outer"]');
$host.mag({
  mode: 'outer',
  ratio: 1 / 1.6
});
              

<div data-mag-thumb="outer-drag">
  <img src="img/canyon/500x300.jpg" />
</div>
<div data-mag-zoom="outer-drag">
  <img src="img/canyon/2000x1200.jpg" />
</div>

$host = $('[mag-thumb="outer-drag"]');
$host.mag({
  mode: 'outer',
  position: 'drag',
  toggle: false
});

<div data-mag-thumb="drag">
  <img src="img/canyon/500x300.jpg" />
</div>
<div data-mag-zoom="drag">
  <img src="img/canyon/2000x1200.jpg" />
</div>

$host = $('[mag-thumb="drag"]');
$host.mag({
  position: 'drag',
  toggle: false
});

<script src="src/js/mag-control.js"></script>

<div data-mag-thumb="controls">
  <img src="img/canyon/500x300.jpg" />
</div>
<div data-mag-zoom="controls">
  <img src="img/canyon/2000x1200.jpg" />
</div>

<div data-mag-ctrl="controls">
  <button data-mag-ctrl-zoom-by="-0.5">-</button>
  <button data-mag-ctrl-zoom-by="0.5">+</button>
  <button data-mag-ctrl-move-by-y="-0.5">^</button>
  <button data-mag-ctrl-move-by-y="0.5">v</button>
  <button data-mag-ctrl-move-by-x="-0.5"><</button>
  <button data-mag-ctrl-move-by-x="0.5">></button>
  <button data-mag-ctrl-fullscreen>[ ]</button>
  <button data-mag-ctrl-destroy>destroy</button>
</div>

$host = $('[mag-thumb="controls"]');
$host.mag({
  toggle: false,
  position: false
});

$controls = $('[mag-ctrl="controls"]');
$controls.magCtrl({
  mag: $host
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4