«
»

2012.06.04

wordpressでfancybox

wordpressでfancybox(jQueryの画像ポップアッププラグイン)を使います

fancyboxはwordpress用のプラグインもあるけど。
手動アップロードした画像を拡大したかったり、
別のエディタからソースをひっぱってきたときにやりやすいように。

example1

HTML:
  1. (header.php)
  2. <?php wp_enqueue_script('fancybox_pack', '/scripts/fancybox/jquery.fancybox-1.3.4.pack.js'); ?>
  3. <?php wp_enqueue_script('mousewheel', '/scripts/fancybox/jquery.mousewheel-3.0.4.pack.js'); ?>
  4. <?php wp_enqueue_script('easing', '/scripts/fancybox/jquery.easing-1.3.pack.js'); ?>
  5. <?php wp_enqueue_script('fancybox_myconfig', '/scripts/fancybox/fancybox_myconfig.js'); ?>
  6. <?php wp_enqueue_style("fancybox_css", '/scripts/fancybox/jquery.fancybox-1.3.4.css' ); ?>
  7.  
  8. (記事部分)
  9. <a class="fancybox" href="/scripts/fancybox/example/1_b.jpg" title="a titleタグ部分"><img alt="example1" src="/scripts/fancybox/example/1_s.jpg" /></a>

JAVASCRIPT:
  1. (fanctybox_myconfig.js
  2.  
  3. jQuery(document).ready(function() {
  4.     jQuery("a.fancybox").fancybox({
  5.         'titlePosition' : 'inside'
  6.     });
  7. });

Comment & Trackback

Trackback are closed.

No comments.

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントリンクを nofollow free に設定することも出来ます。