Wednesday, March 5, 2014

Simple MTG Tooltips

This builds on the Simple Inline Tooltips script I posted a few days ago. Simply specify the name of a Magic: The Gathering card in an inline span, and this script will automatically attach a tooltip with the card's image, and link to the card's Gatherer page.



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