Web制作の現場で使う jQueryデザイン入門 [改訂新版] 増刷決定

このエントリーをはてなブックマークに追加

Web制作の現場で使う jQueryデザイン入門 [改訂新版]3月に発売されたWeb制作の現場で使う jQueryデザイン入門 [改訂新版]の増刷が決定しました。

改訂後は始めての増刷です。電子書籍版も好調のようで購入いただいた皆様ありがとうございます!

本書はこれからjQueryを始めたい!jQueryに興味がある!という方にはお勧めの一冊です。そろそろjQuery勉強始めないと・・・と思っている方はぜひ一度手にとってみてください。

関連エントリー

電子書籍発売! Web制作の現場で使うjQueryデザイン入門[改訂新版]
Web制作の現場で使うjQueryデザイン入門の改訂版が発売されます。

スポンサードリンク

«今度こそ始めるjQuery超入門 | メイン | これからフリーランスになる人へ»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/612
コメント

西畑先生、こんばんは。
Web制作の現場で使う jQueryデザイン入門 [改訂新版]を購入させていただきました。
jQueryに初めて触りましたが、なんとか読み書きできるようになりました。
ありがとうございます。

本来であればお問い合わせのページより質問したかったのですが、画面遷移がうまくいかないようなのでこちらから失礼いたします。

Lightboxのところで、うまくいかない箇所が出ました。
<dd>にidを振り、オーバーレイしたところに次のオーバーレイへと前のオーバーレイへのリンクボタン(画像)を付加したいと考えています。
以下ソースです。

$(function(){
  $("dl.overlay dt").css("cursor","pointer");
  $("dl.overlay dd").hide();
  $("body").append("<div id="'glay_layer'></div><div id='over_layer'></div>");
  $("#glay_layer").click(function(){
    $(this).hide();
    $("#over_layer").hide();
  });
  
  $("dl.overlay dt").click(function(){
    var idname = parseInt($("+dd",this).attr("id"));
    $("#glay_layer").fadeIn("fast");
    $("#over_layer").fadeIn("slow").html("<img src='/common/image/close.gif' class='close' />" + $("+dd",this).html()).css({
      "margin-left":"-" + $("#over_layer").width()/2 + "px"
    });
  
    $("#over_layer img.close").click(function(){
      $("#glay_layer").hide();
      $("#over_layer").hide();
    });
  
    $("#over_layer img.next").click(function(){
      $("#over_layer").hide();
      var id = idname + 1;
      $("#over_layer").fadeIn("slow").html("<img src='/common/image/close.gif' class='close' />" + $("dd#" + id).html());
    });
  
    $("#over_layer img.prev").click(function(){
      $("#over_layer").hide();
      var id = idname - 1;
      $("#over_layer").fadeIn("slow").html("<img src='/common/image/close.gif' class='close' />" + $("dd#" + id).html());
    });
  });
});

これでimg.nextをクリックすると1回はうまくいくのですが、の中身がフェードインしてくると、2回目のクリックに反応しません。
img.closeにも反応しません。
#glay_layerをクリックして1番上のfunctionを抜けると、再度反応するようになるようです。

恐れ入りますが、どのようにしたら2回目以降も反応するようになるのか、ご助言いただけないでしょうか。

投稿者:加賀 | 2013年10月31日 01:18

加賀さん、以下のように修正したら動きませんか?

$(function(){
   (中略)
   $("#over_layer img.next").click(function(){
      $("#over_layer").hide();
      var id = idname + 1;
      $("dd#" + id).next().click();
    });
  
    $("#over_layer img.prev").click(function(){
      $("#over_layer").hide();
      var id = idname - 1;
      $("dd#" + id).prev().click();
    });
  });
});
投稿者:西畑一馬 | 2014年1月 7日 14:41
コメントを投稿