私が書こうとしている jQuery ギャラリーの助けをいただければ幸いです。私は普段書いている小さな jQuery に比べて、私の深さからはほど遠いです。私はたくさん検索して読んでいますが、すべてをまとめるのは私にとって非常に難しいことがわかりました!
一般的な考え方は次のとおりです。
ギャラリーに追加のサムネイルを追加する独自の小さな関数があります。サムネイルをクリックすると、メイン (大きい) 画像が変更され、選択した画像が表示されます。これは問題なく動作しますが、この関数を複数回呼び出すと、サムネイルが重複して表示されます。これは、私の主な問題 (機能のオンとオフの切り替え) の症状です。このギャラリーは小さい画面で実行されます (ご覧のように 980 に設定されています)。
2 つ目の機能は、fancyBox というプラグインです。これを 980 より大きいウィンドウで動作させたいと思い
removeClass()ます。プラグインが使用する「fancybox」クラスを取り除くために使用する、非常に単純な方法でこれを非アクティブ化することを計画していました。ただし、ウィンドウのサイズを変更すると、このプラグインが何度も呼び出される可能性があるため、これでは不十分な場合があります。このテーマについてもっと知りたいです。ウィンドウのサイズ変更が発生する速度を遅くするように設計された、ポール・アイリッシュのサイトからいくつかのスクリプトを見つけました。これにより、クライアント マシンの負荷が大幅に軽減されることが期待されます。
これにより、2 つの機能が制御されます。
jQuery(window).smartresize(function()- 完全なスニペットを以下に掲載します。
だから..私の問題/質問はこれです。ウィンドウのサイズが変更されたときに、これら 2 つの機能をオンまたはオフにするにはどうすればよいですか? 私は十分に知りません (笑わないでください!) が、データ (イベントリスナー?) またはそのようなものを取り除く必要があると予想していますか? わかりません。レスポンシブ Web サイトを作成しているので、何度も使用する必要があるため、これを機能させる方法を本当に知りたいと思っています。
これが私がこれまでに持っているものです：
//window resize function, to slow down the response
(function(jQuery,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
私の危険なギャラリー..
// gallery function
var responsiveGallery =
//responsive gallery
function tabletGallery(){
var featuredImg = $('.gallery .featured_img a').attr('href');
var featuredImgThumb = $('.gallery .featured_img a').data('thumb');
//count children for class
var newClass = $('ul#gallery_thumbnails li').length + 1;
$('ul#gallery_thumbnails').append(
$('<li>').addClass('_' + newClass).append(
$('<span>').addClass('img_shell').append(
$('<a>').attr('href', featuredImg).append(
$('<img>').attr('src', featuredImgThumb)
)
)
)
);
$('.gallery .featured_img a').click(function(e){ e.preventDefault(); });
$('ul#gallery_thumbnails a').click(function(e){
e.preventDefault();
var bigLink = $(this).attr('href');
$('.gallery .featured_img img').attr('src', bigLink);
});
}
ここで、ギャラリーの機能を停止する必要があると思います
// destroy gallery
var destroyGallery =
function destroyGallery(){
$('.gallery a').unbind(click);
}
そして、ここでウィンドウのサイズ変更機能が機能しています
// usage:
jQuery(window).smartresize(function(){
var WW = jQuery(window).width();
if(WW < 980)
{
responsiveGallery();
jQuery('.gallery a').removeClass('fancybox');
}
else
{
destroyGallery();
jQuery('.fancybox').fancybox({ nextEffect:"fade" , prevEffect:"fade", padding:5 });
}
});
これが大きな投稿であることは承知していますが、これを完了するのにそれほど遠くないことを願っています. この度はご覧いただき誠にありがとうございます。