1

目標： 現在の大きな画像といくつかのサムネイルを表示する要素を作成します。誰かがサムネイルをクリックすると、現在の大きな画像をクリックした画像に置き換える必要があります。Shadowboxは大きな画像でのみ機能するはずです。画像（サムネイル）が少ない場合、シャドウボックスには3つの大きな画像すべてが含まれている必要があります（1つだけを表示するのではありません）。

問題：以下 のコードは機能しますが、修正が必要な問題がいくつかあります。

  1. 最初の読み込み時にサムネイルをクリックすると、＃panelのメインの大きな画像が最初にサムネイルに置き換えられ、約1秒後に通常の大きな画像に置き換えられます。したがって、大きな画像は最初にクリック時にプリロードしてから、＃panelなどに追加する必要があります。
  2. rel属性は置換時にどういうわけか失われます。#panelに新しい画像が追加されると、rel属性が緩んでいるように見えます（シャドウボックスが機能しません）
  3. サムネイルをクリックすると、シャドウボックスが読み込まれますが、これは防止する必要があります。シャドウボックスは、＃panelで大きな画像をクリックした場合にのみロードする必要があります。誰かがその大きな画像をクリックすると、シャドウボックスはすべての大きな画像をロードするはずです。これは注意が必要な場合があり、HTMLコードの変更が必要になる場合があります。

WORKINGDEMO デモは機能しなくなりました

HTML：

<div id="panel">
  <a href="path_to_image1.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image1.jpg&w=200&h=20" alt="Image name1" />
  </a>
</div>

<div id="thumbs">
  <a href="path_to_image1.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image1.jpg&w=30&h=30" alt="Image name1" />
  </a>
  <a href="path_to_image2.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image2.jpg&w=30&h=30" alt="Image name2" />
  </a>
  <a href="path_to_image3.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image3.jpg&w=30&h=30" alt="Image name3" />
  </a>
</div>

JS：

$('#thumbs a').click(function(evt) {
  evt.preventDefault();
  var clickedElement = $(this).clone().find('img').attr('src', function(i, src){
    return src.replace('w=30&h=30', 'w=200&h=200')
  }).end();
  $('#panel').html(clickedElement);
});
4

2 に答える 2

0

jquery の .load() 関数を使用できます。

考え方は単純です。まず、位置 -9000、-9000 のどこかに隠し div を作成し、そこに画像 src を含めます。

img要素のIDが「tempimagecache」だとしましょう

だから今私たちがすることは次のとおりです。

$.('#tempimagecache').load(function(){
{
    // Now place the image code to the reqired location and its loaded from the cache
});

ここに私が私のウェブサイトで取り組んだサンプルがあります。 http://fr3ak.me/

また、サム上でシャドー ボックスがポップアップしないようにするには、rel 属性を削除してください。

于 2012-08-24T07:40:34.297 に答える
0

http://slidesjs.com/を見つけました。これは、私が達成したかったのとまったく同じ機能を持っています。私を助けようとしてくれたすべての人に感謝します。

于 2012-08-25T10:09:29.763 に答える