動態調整簡單莫代爾根據什麼是點擊

我是相當新的jQuery的/ JavaScript的，所以我有幾個問題，希望你可以點我在正確的軌道上。動態調整簡單莫代爾根據什麼是點擊

在我的項目，我有圖像的一行，顯示圖像的預覽。一種圖像庫。

我希望能夠點擊到更小的圖像，然後得到簡單的模態顯示全尺寸圖像，動態調整和動畫。

我能做到這一點與阿賈克斯，刷新簡單模式？我仍然在學習如何在jQuery中使用Ajax，並且似乎有很多方法可以實現它。

以下是我有：

的jQuery：

$('.col1').find('img.overlay').click(function() { 

       $('#imgpreview').modal({overlayClose:true}); 

       var img = $(this).parent().find('img.shared').attr('src'); 
       var imgW = $(this).parent().find('img.shared').attr('width'); 
       var imgH = $(this).parent().find('img.shared').attr('height'); 

       $('#imgpreview').css('width', imgW); 
       $('#imgpreview').css('height', imgH);     
       $('#imgpreview').find('img').attr('src', img); 

      }); 

    });

HTML：

  <div id="imgpreview"><img src=""></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img1.jpg"></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img2.jpg"></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img3.jpg"></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img4.png"></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img5.jpg"></div> 
         <div class="col1 bg nmr"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" src="img/uploaded/img6.jpg"></div>

我可以顯示圖像的簡單模式內，但圖像不坐尺寸內所以我可以給它一個邊框和造型，也意味着它不會坐在中間。

另一種選擇是爲每個圖像一個簡單的模態對話框和回聲出jQuery的用PHP，因爲圖像會在數據庫中。但是會有更好的方法嗎？

來源

2012-08-04 Dan

html請，nm關於模態位。 – Dale 2012-08-04 09:06:00

向問題添加了HTML。 – Dan 2012-08-04 09:18:33

首先，您將原始尺寸的元素用作「大圖片」尺寸的尺寸。當然這不會有正確的尺寸。我對「modal」一無所知，但我發現jQuery插件通常不值得爲自己的解決方案鋪平道路。我會把「大圖片」放在div標籤中，這樣你就可以移動它並做任何你想做的事情。如果不清楚的話，讓我提出一個解決方案。 – Dale 2012-08-04 09:32:57

我對這個模式插件沒有任何線索。根據我的經驗，jQuery插件幾乎不值得搞清楚。話雖這麼說，你可以試試這個....

<head> 
    $(document).ready(function() { 
     $('.overlay).click(function() { 
      $('#bigPic).append('<img id="myPic" src="my dynamic source.gif"/>'); 
     });//end click 
    });//end ready 
</head> 

<body> 
    <div id="previews"> 

     //Your posted html here 
    </div> 
    <div id="bigPic"> 

    </div> 
</body>

然後CSS就會有類似： IMG #myPic { 高度：100％; 寬度：100％; }

看起來你是通過什麼這是你的問題有點困惑。你的情況是$（「img.overlay」），你可以僅僅通過改變

<div id="bigPic">

以滿足您的需求，避免所有的廢話。

來源

2012-08-04 09:53:53 Dale

我不完全確定，但我認爲道格拉斯克羅克福德說，$（document）.ready（）的位置在這個完全不合適的位置。我不知道，我不明白那個人在說什麼的一半，但他肯定是值得聽的人。歡呼你，快樂的編碼！ – Dale 2012-08-04 09:57:45

動態調整簡單莫代爾根據什麼是點擊

回答

相關問題