私は頻繁に jQuery スライドショーを使用していますが、Google アナリティクスを使用して、人々がショーにどれだけ参加したかを測定する方法を見つけたいというリクエストを受け取りました。
私は通常、それを追跡するために onClick イベント タグを追加します (以下の HTML でこの例を見ることができます) が、この場合、ナビゲーション矢印がまったく変わらないため機能しません。人が見ている特定のスライドをクリックアクションに結び付ける方法を確認してください。
私はSOとインターネットを見てきましたが、これを達成する方法についてのアイデアが見つかりません。私が考えることができる唯一のことは、スライダーを再プログラムして、ナビゲーション矢印を含むすべてのコンテンツを変更し、クリックされたときに表示されるスライドに関連付けられた矢印に一意のクリック イベントを割り当てることができるようにすることです。スライドショーがこのように滑らかになるとは思いませんが、そのままにしておきたいと思います。また、クリックするたびにサイト全体がリロードされないように、すべてのスライドを 1 つの URL に保持したいと考えています。
アドバイスをよろしくお願いします。 実際の例はこちらにありますが、必要な場合に備えて、スライドショーの jQuery コードを次に示します。
<script type="text/javascript">
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width();
var speed = 300;
thumbs.removeClass('selected').first().addClass('selected');
thumbs.click(function() {
var target = $(this).index();
mask.animate({'left':'-'+imgW*target+'px'},speed);
thumbs.removeClass('selected');
$(this).addClass('selected');
});
$('.Bleft').on('click',function() {
var i = $('ul.thumbHolder li.selected').index();
i--;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
if ( i === -1 ) { mask.animate({'left':'-'+imgW*$('ul.thumbHolder li').index()+'px'},speed); }
else{ mask.animate({'left':'-'+imgW*i+'px'},speed); }
clearInterval(counter);
});
$('.Bright').on('click',function() {
var i = $('ul.thumbHolder li.selected').index();
i = i >= thumbs.length-1 ? 0 : i+1;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
mask.animate({'left':'-'+imgW*i+'px'},speed);
clearInterval(counter);
});
var count = 0;
var counter = window.setInterval(timer, 5000);
function timer() {
count=count+0;
if (count >= 0) { count = 0; return; }
mask.animate({'left':'-'+ imgW*count +'px'},speed);
thumbs.removeClass('selected');
thumbs.eq(count).addClass('selected');
}
});
</script>
HTMLは次のとおりです。
<div id="slideshow-container">
<div class="control Bleft"></div>
<div class="control Bright"></div>
<div class="mask">
<ul class="imgHolder">
<li>
<div id="office-tour-slide01">
<p>In April we rolled out the orange carpet to celebrate the grand opening of our new North American Marketing Office and Culinary Center. L’Atelier Le Creuset (French for “The Le Creuset Workshop”) is situated on the banks of the Ashley River in Charleston, SC.<br /><br />The front entrance to the nearly 9,000 square feet of renovated office space is flanked by entirely edible landscaping. Fresh herbs such as mint, thyme and cilantro are put to good use in our Atelier kitchen.
</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_01.jpg" alt="Front Entrance" />
</div><!--//END office-tour-slide01-->
</li>
<li>
<div id="office-tour-slide02">
<p>The glass walled boardroom is more than just a meeting space. It also doubles as a museum for a few of our heritage pieces. The lighting pattern on the ceiling subtly mimics our three-ring logo.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_02.jpg" alt="Le Creuset Board Room" />
</div><!--//END office-tour-slide02-->
</li>
<li>
<div id="office-tour-slide07">
<p>A white marble counter just outside the conference room showcases our newest sun-inspired color, <a href="/cookware/CatalogSearchResultCmd?storeId=10151&catalogId=20002&langId=-1&docType=1&searchTerm=Soleil&shopBy=color" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Soleil']);">Soleil</a>. The backlit seagrass panel is a nod to our coastal location.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_07.jpg" alt="Soleil Showcase" />
</div><!--//END office-tour-slide07-->
</li>
<li>
<div id="office-tour-slide03">
<p>Even the bathrooms feature an unexpected twist— <a href="/cookware/product_Goose-Pot_10151_-1_20002_83103" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'GoosePot']);">Goose pots</a> – yes, goose pots! – double as sink basins.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_03.jpg" alt="Le Creuset Sinks" />
</div><!--//END office-tour-slide03-->
</li>
<li>
<div id="office-tour-slide04">
<p>While the <a href="/cookware/content_Le-Creuset-Truckette_10151_-1_20002" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Truckette']);">Le Creuset Truckette</a> has to stay parked outside, our custom vintage-style cruiser brings a bit of whimsy to the lobby.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_04.jpg" alt="Le Creuset Beach Cruiser" />
</div><!--//END office-tour-slide04-->
</li>
<li>
<div id="office-tour-slide05">
<p>An open workspace allows for both collaboration and optimal light exposure. The center island acts as a runway for our collection of pots autographed by our favorite chefs.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_05.jpg" alt="Le Creuset Studio" />
</div><!--//END office-tour-slide05-->
</li>
<li>
<div id="office-tour-slide06">
<p>L’Atelier – the workshop – is a fully equipped demonstration kitchen with the highest-quality Miele appliances. Intended to be a hub for community activity, it’s already hosted our first Guest Chef, with a second soon to follow. Our Guest Chef Series invites innovative chefs to prepare dishes and demonstrate techniques to a ticketed audience.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_06.jpg" alt="L’Atelier" />
</div><!--//END office-tour-slide06-->
</li>
<li>
<div id="office-tour-slide08">
<p>Our communications team maintains a media wall with tears and inspirations from recent photo shoots, magazines and campaigns.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_08.jpg" alt="Communications Team Wall" />
</div><!--//END office-tour-slide08-->
</li>
<li>
<div id="office-tour-slide09">
<a href="/cookware/product_Herb-Planter_10151_-1_20002_89624" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'HerbPlanter']);">
<img width="162" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_01.jpg" alt="Plant Your Own Herbs: Herb Planter" />
</a>
<a href="/cookware/product_5-Shelf-Cookware-Display-Stand_10151_-1_20002_10056" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '5ShelfCookwareDisplayStand']);">
<img width="174" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_02.jpg" alt="Display Your Cookware: 5 Shelf Cookware Display Stand" />
</a>
<a href="/cookware/product_5-1%2F2-qt.-Round-French-Oven_10151_-1_20002_10138" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '512qtRoundFrenchOven']);">
<img width="167" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_03.jpg" alt="Stock Your Shelves: 5 1/2 qt. Round French Oven" />
</a>
<a href="/cookware/product_16-Piece-Dinnerware-Set_10151_-1_20002_10168_24076" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '16PieceDinnerwareSet']);">
<img width="202" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_04.jpg" alt="Feed a Crowd: 16-Piece Dinnerware Set" />
</a>
<a href="/cookware/content_cooking-techniques-ruhlman_10151_-1_20002" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Ruhlman']);">
<img width="195" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_05.jpg" alt="Learn to Cook: Technique Series from Michael Ruhlman" />
</a>
</div><!--//END office-tour-slide09-->
</li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="office-tour-nav" style="display: none;">
<ul class="thumbHolder">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div><!--//END soleil-nav-->
</div><!--//END slideshow-container-->