ここではjQuery jdtRunAwayでクリックさせないリンクを紹介していきます。

デモはこちら
https://office-goto.info/demo/runaway/

ダウンロードはこちら
http://5509.me/log/jdtrunaway/trackback
5509様

head内で読み込み

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jdtrunaway.js"></script>

jdtrunaway.jsを読み込んでください。

script

jQuery(function($){
    $('a').jdtRunAway();
});

ターゲット指定した要素が逃げていきます。

ここではjQuery画像拡大プラグインのZoomを紹介していきます。

デモはこちら
https://office-goto.info/demo/zoom/

jQuery Zoomをダウンロード
http://www.jacklmoore.com/zoom

headで読み込み

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="zoom-master/jquery.zoom-min.js"></script>

jquery.zoom-min.jsまたはjquery.zoom.jsを読み込んでください。

CSS

<style type="text/css">
    .zoom {
        display:inline-block;
        position: relative;
    }
    .zoom img {
        display: block;
    }
    .zoom img::selection { background-color: transparent; }

    #ex2 img:hover { cursor: url(grab.cur), default; }
    #ex2 img:active { cursor: url(grabbed.cur), default; }
</style>

script

$(document).ready(function(){
    $('#ex1').zoom();
    $('#ex2').zoom({ on:'grab' });
    $('#ex3').zoom({ on:'click' });			 
    $('#ex4').zoom({ on:'toggle' });
});

マウスオーバー、ドラッグ、クリックを設定できます。

html

<span class="zoom" id="ex1">
    <img src="img/daisy.jpg" width="555" height="320">
</span>
<span class="zoom" id="ex2">
    <img src="img/roxy.jpg" width="290" height="320">
</span>
<span class="zoom" id="ex3">
    <img src="img/daisy.jpg" width="555" height="320">
</span>
<span class="zoom" id="ex4">
    <img src="img/roxy.jpg" width="290" height="320">
</span>

spanタグでimgタグを囲みターゲット指定してください。

ここではSyntaxHighlighterを使いソースコードをきれいに表示させます。

WordPressで使う場合はこちら
https://office-goto.info/wordpress/syntaxhighlighter-2/

SyntaxHighlighter3.0.83をダウンロード
http://alexgorbatchev.com/SyntaxHighlighter/download/

head内で読み込み

<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css">
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>

4行目以降を自分が使用する言語に合わせて読み込んでください。

改行などの設定

<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode=true;
    SyntaxHighlighter.config.stripBrs=true;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
</script>

htmlでの使い方

<pre class="brush: js;"></pre>

jsの箇所を使用するソースコードに適した設定をしてpreタグで表示させるソースを囲んでください。

パラメーター一覧
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

ブログなどで使用する際はこちらで特殊文字のエスケープを行ってください。
http://www.mapee.jp/tools/pretagmaker/
Mapee様

WardPressにはプラグインがありますのでインストールして使用できます。

知らなかったので今回の解説どおり読み込んでました。

ここでは画像拡大プラグインのjQuery fancyBoxの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/fancybox/

fancyBoxをダウンロード
http://fancyapps.com/fancybox/#license

headで読み込み

<link href="source/jquery.fancybox.css" rel="stylesheet" type="text/css">
<script src="lib/jquery-1.10.1.min.js"></script>
<script src="source/jquery.fancybox.pack.js"></script>

jquery.fancybox.css、jquery.fancybox.js(jquery.fancybox.pack.js)を読み込んでください。

パラメータの設定

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
            openSpeed  : 700,
            closeSpeed  : 700,
            openEffect : 'elastic',
            closeEffect : 'elastic'
        });
    });
</script>

設定できるパラメータ
http://fancyapps.com/fancybox/#docs

html

<a href="img1.jpg" data-fancybox-group="group" class="fancybox" title="1"><img src="thum/img1.jpg"></a>
<a href="img2.jpg" data-fancybox-group="group" class="fancybox" title="2"><img src="thum/img2.jpg"></a>

idやclassなどでターゲットを指定してください。
グループ化する場合はdata-fancybox-group=”group”を記述してください。