2009-05-26 11 views
1

私は以下を達成するために探しています。 私は最初に空白のdiv(#description)を別のdiv(#zoom)のTOPに置いて、ユーザーがページの横にある15またはそれ以上のサムネイルの1つを選択したときに大きな画像を挿入します。Jqueryとajax - ファイルの内容を挿入するためのリンクを使用

私は、次のような側のリンクがあります:クリックした際には、サイト上の#description divのに「description.php」ファイルの内容を注入する必要があること

<div id="whatisit"><a href="description.php"></div> 

を。まず、#zoomの内容を "fadeOut"する必要があります。

私は仕事を一緒にしようとした次のコードを持っています。

<script language="javascript"> 
$(document).ready(function() { 
    $("#whatisit a").click(function() { 
     var descPath = $(this).attr("href"); 
     $("#zoom img").fadeOut("slow", function() { 
      $(this).attr({ src:descPath }).fadeIn("slow"); 
     }); 
    return false; 
    }); 
}); 
</script> 

#zoomの内容はフェードアウトされますが、 "descriptions.php"ファイルの内容は注入またはフェードインされません。私は何か間違っているのですか?または何かが欠けている?

ご協力いただきありがとうございます。

答えて

1

あなたは要求を取得するAJAXを使用する必要があるので、このような何かやる:これは#descriptionにdescription.phpの内容を注入しなければならない

<script language="javascript"> 
$(document).ready(function() { 
    $("#whatisit a").click(function() { 
     var descPath = $(this).attr("href"); 
     $.get(descPath, function(html_returned) { 
      $("#zoom img").fadeOut("slow", function() { 
       $("#description").html(html_returned).fadeIn("slow"); 
      }); 
     }, "html"); 
     return false; 
    }); 
}); 
</script> 

を。

+0

これはトリック(一種!)でした。 :)画像のサムネイルをクリックすると(クリックして#zoomに大きな画像が読み込まれると)「desription」のテキストが残ります。それは消えるはずです。 –

+0

私が持っていた別のjquery jsスクリプトにfadeOutコマンドを追加しましたが、問題は解決されました。 ご協力いただきありがとうございます。 –

0

まあ、それはsrc属性を画像上に設定することでコンテンツをdivにプッシュしようとしているようですが、それは何もしません。可能であれば、意味のあるiframeでした。それ以外の場合は、description.phpのコンテンツをdiv、methinksに引き込むために、少し面白くする必要があります。

関連する問題