2

ライトボックスで単一の画像を開くためのライブラリまたはスクリプトを探しています。これまでに見つけたすべてのライブラリには、画像とサムネイルの親タグとして html-anchor が必要です。

<a href="image.jpg" class="popout"><img src="thmumbnail.jpg"></a>

「ウェブに適した」解像度/サイズでオンラインストレージの場所から直接写真を読み込んで埋め込んでいるため、サムネイルはありません。だから私ができるようにしたいのは、次のようなものです：

<img class="popout" src="www.photobucket.com/myimage.jpg" height="300" width="500">

高さ/幅もcssで指定されます。そのようにしたい理由の1つは、すでに約100枚の写真で記事を書いているということです。だから私はそれらすべてをアンカーに埋め込みたくありません...

質問に戻ります:それを可能にするライブラリまたはスクリプトはありますか?

4

4 に答える 4

4

ここから新しいlightbox.jsファイルを取得します 。Lightbox2プラグイン任意のエディターで開き ます：以下に記述されたコードを見つけます。
lightbox.js

Lightbox.prototype.enable = function() {
  var _this = this;
  return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
    _this.start($(e.currentTarget));
    return false;
  });
};

その中で、3行目を次のコードに置き換えます。

return $('body').on('click', 'img[rel^=lightbox], area[rel^=lightbox]', function(e) {

次にlightbox.js、単語を検索して、hrefそれを。に置き換えsrcます。hrefそのファイル内のすべてに対してこれを実行し.jsます。
この.jsファイルをプロジェクトに含めます。
画像のHTMLコードは次のようになります。

<img class="popout" 
     src="www.photobucket.com/myimage.jpg" 
     rel="lightbox[plants]" 
     title="Say something about this image">

基本的に私たちが変更しているのは

  • 属性の追加rel：
    2つ以上の画像に同じrel属性が含まれている場合、それらは画像セットとして表示されます。
  • タイトル属性の追加：
    ライトボックスに画像の情報が表示されるだけです。

更新：
サムネイル画像のsrcが実際の画像のsrcと異なる場合は、次のようにもう1つの属性を追加でき<image>ますvalue。 

<img class="popout" 
     src="thumbnail path" 
     value="actual image path"
     rel="lightbox[plants]" 
     title="Say something about this image">

hrefただし、これを追加するには、キーワードをからlightbox.jsに変更する必要がありますvalue。
その後、すべて完了しました。

于 2012-10-25T13:02:25.797 に答える
2

手動で呼び出すことができるほとんどすべてのライトボックスのようなスクリプトを使用できます。例 ( fancyboxを使用): http://jsfiddle.net/eXaGn/

fancbybox のように:

$("img").click(function() {    
    $.fancybox.open(this.src);    
    return false;    
});​
于 2012-10-25T13:00:28.827 に答える
1

カラーボックスを使用できます: http://www.jacklmoore.com/colorbox

次に、コードは次のようになります。

$(".popout").on("click", showImage);
function showImage(e)
{
    $.colorbox({href:$(e.currentTarget).attr("src")});
}
于 2012-10-25T12:57:04.070 に答える
0

同様の機能が必要で、SimpalModal に決めました

http://www.ericmmartin.com/projects/simplemodal/

HTML文字列を渡すことができ、それからモーダルが生成され、プログラムでモーダルを生成できることが気に入りました。モーダルをトリガーするための埋め込みコンテンツやタグは必要ありません

于 2012-10-25T13:00:28.700 に答える