Getting Started
Include jQuery, inlinetooltip.1.0.js, inlinemtg.1.0.js, and (optionally) inlinetooltip.1.0.css in your page's header:
<script src="https://code.jquery.com/jquery-1.11.0.min.js"/> <link href="./inlinetooltip.1.0.css" rel="stylesheet"/> <script src="./inlinetooltip.1.0.js"/> <script src="./inlinemtg.1.0.js"/>
Then, just wrap the name of any card in a
<span>
with the "inlinemtg" class, and the script will do the rest:
<span class="inlinemtg">Lightning Bolt</span>
Examples
Basic functionality:
Demo
Lightning Bolt
HTML
<span class="inlinemtg">Lightning Bolt</span>
With the custom data attribute
data-name
, you can display something other than the card name in place of the link text / tooltip trigger:
Demo
Custom link text
HTML
<span class="inlinemtg" data-name="Lightning Bolt">Custom link text</span>
With the custom data attribute
data-set
you can retrieve a particular set's version of a card. Most common ways of referring to a set (printed prior to March 2014) will be correctly translated (via a data table) to a Gatherer set code. (In order to be futureproof, if no match is found, the script assumes you know what you are doing and uses whatever you specified.)
Demo
Lightning Bolt
HTML
<span class="inlinemtg" data-set="Alpha">Lightning Bolt</span>
With the custom data attribute
data-multiverseid
, you can retrieve a card by multiverse id rather than by name:
Demo
Italian Lightning Bolt
HTML
<span class="inlinemtg" data-multiverseid="225652">Italian Lightning Bolt </span>
With the custom data attribute
data-options
, you can pass a string to the Gatherer image handler's "options" parameter, "rotate90" for example:
Demo
Fire // Ice
HTML
<span class="inlinemtg" data-options="rotate90">Fire // Ice</span>
A note on split cards: Gatherer's image handler will accept split card names (like "Fire // Ice"), but the search handler chokes on them. The only way I know of to correctly link to a split card on Gatherer is by multiverse id:
Demo
Fire and Ice
HTML
<span class"inlinemtg" data-multiverseid="292753" data-options="rotate90"> Fire and Ice</span>
Source Code
No comments:
Post a Comment