/ Published in: jQuery
This was for a "Sport Landing Page" where people can select their outfits. There is intial intro box that gets cleared on the first selection. The thumbnails popout on hover. And there is a clear function that takes out all the products selected to just show the background image.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<style type="text/css"> #sportheader-top { background: transparent url([% tag('ig_cache_image_url') %][% image_dir %][% bg_images.get_random_element | html %]) no-repeat; height:633px; width:727px; } </style> <script type="text/javascript"> $(function () { $('.more-bar a').click(function () { $(this.hash).slideToggle(1500); $(this).parent().toggleClass("active"); return false; }); }); $(function () { $('div.trigger').click(function () { $(this.parent).toggleClass("active"); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $("div.trigger").toggle(function(){ $(this).addClass("active"); }, function () { $(this).removeClass("active"); }); $("ul.thumb li").hover(function() { $(this).css({ 'z-index': '10' }); $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/ .animate({ marginTop: '-45px', /* The next 4 lines will vertically align this image */ marginLeft: '-45px', top: '40%', left: '40%', width: '75px', /* Set new width */ height: '75px', /* Set new height */ padding: '10px' }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */ }, function() { $(this).css({ 'z-index': '0' }); $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/ .animate({ marginTop: '0', /* Set alignment back to default */ marginLeft: '0', top: '1%', left: '1%', width: '45px', /* Set width back to default */ height: '45px', /* Set height back to default */ padding: '0px' }, 400); }); $("ul.thumb li.head a").click(function() { apparel_init(); $(".head_title").show(); var mainHead = $(this).attr("href"); //Find Image Name var mainHeadTitle = $(this).attr("title"); //Find Product Title var mainHeadLink = $(this).attr("alt"); //Find Product Link _gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainHeadTitle]); $(".head_title").html("<a class=sportprod href='"+mainHeadLink+"'>"+mainHeadTitle+"</a>"); $("#main_head a").attr({ href:mainHeadLink }); $("#main_head img").attr({ src: mainHead }); return false; }); $("ul.thumb li.app a").click(function() { apparel_init(); $(".app_title").show(); var mainApp = $(this).attr("href"); //Find Image Name var mainAppTitle = $(this).attr("title"); //Find Product Title var mainAppLink = $(this).attr("alt"); //Find Product Link _gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainAppTitle]); $(".app_title").html("<a class=sportprod href='"+mainAppLink+"'>"+mainAppTitle+"</a>"); $("#main_app a").attr({ href:mainAppLink }); $("#main_app img").attr({ src: mainApp }); return false; }); $("ul.thumb li.pant a").click(function() { apparel_init(); $(".pant_title").show(); var mainPant = $(this).attr("href"); //Find Image Name var mainPantTitle = $(this).attr("title"); //Find Product Title var mainPantLink = $(this).attr("alt"); //Find Product Link _gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainPantTitle]); $(".pant_title").html("<a class=sportprod href='"+mainPantLink+"'>"+mainPantTitle+"</a>"); $("#main_pant a").attr({ href:mainPantLink }); $("#main_pant img").attr({ src: mainPant }); return false; }); $(".clearproducts").click(function() { _gaq.push(['_trackEvent', '[% sportanalytics %]', 'Clear-Click']); $("#main_apparel").removeClass('lighten'); $(".clearproducts").hide(); $(".pant_title").hide(); $(".app_title").hide(); $(".head_title").hide(); $("#main_head img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" }); $("#main_app img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" }); $("#main_pant img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" }); }); function apparel_init() { $("#main_apparel").addClass('lighten'); $(".clearproducts").show(); $("#start-sport").hide(); $("#left-wrap").show(); $("#main_pant").show(); } var scrolling = null; var slideleft = $("#slidearea-left"); var slideright = $("#slidearea-right"); $("#slidedown-left").hover(function scroll_down() { slideleft.animate({scrollTop: (slideleft.scrollTop() + slideleft.position().top)},600); scrolling = window.setTimeout(function() { scroll_down(); }, 500); }, function() { window.clearTimeout(scrolling); }); $("#slideup-left").hover(function scroll_up() { slideleft.animate({scrollTop: (slideleft.scrollTop() - slideleft.position().top)},600); scrolling = window.setTimeout(function() { scroll_up(); }, 500); }, function() { window.clearTimeout(scrolling); }); $("#slidedown-right").hover(function scroll_down() { slideright.animate({scrollTop: (slideright.scrollTop() + slideright.position().top)},600); scrolling = window.setTimeout(function() { scroll_down(); }, 500); }, function() { window.clearTimeout(scrolling); }); $("#slideup-right").hover(function scroll_up() { slideright.animate({scrollTop: (slideright.scrollTop() - slideright.position().top)},600); scrolling = window.setTimeout(function() { scroll_up(); }, 500); }, function() { window.clearTimeout(scrolling); }); $("#spinner").hide(); $("#thumb-holder").show(); }); </script>