Title: Trouble with Tympanus.net/codrops Jquery Tutorial
Last modified: August 20, 2016

---

# Trouble with Tympanus.net/codrops Jquery Tutorial

 *  Resolved [imnikkilee](https://wordpress.org/support/users/imnikkilee/)
 * (@imnikkilee)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/)
 * Hey All,
 * Having a bit of trouble implementing a jquery code from the Tympanus website.
   Not sure what I’m doing wrong, as I’ve implemented quite a few jquery codes on
   WordPress before.
 * The specific code I’m going for is:
    [http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/](http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/)
 * What I’ve done so far:
 * HTML:
    I added the html into a WordPress page. The reason I added it to the page
   and not the template is because I’m hoping to have more than one of this gallery,
   and I’d hate to have to create a new template for every page. Could adding the
   html to the page be the problem? I don’t see why.
 * CSS:
    Copied and pasted their CSS into my theme’s styles. These are all loading
   fine.
 * JS:
    In this tutorial, the script is added right before the </body> so I added
   the code to my footer.php right before the </body>. I copied and pasted exactly
   what they had.
 * I’m pretty sure the problem is with the JS. I read through all the comments on
   the Tympanus post and somebody mentioned problems with the quotes in (‘click’)
   in a php file. The quotes have to be changed or something? Couldn’t figure that
   out. Or maybe it’s something completely different!
 * Anyways, if anyone could help me figure this out it would be awesome. It’s so
   frustrating because I’ve used plenty of jquery before!
 * Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204713)
 * Could you post here the JavaScript that you think is problematic?
 *  Thread Starter [imnikkilee](https://wordpress.org/support/users/imnikkilee/)
 * (@imnikkilee)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204716)
 * Sure thing,
    but I warn you, it’s a bit lengthy!
 *     ```
       <script type="text/javascript">
       			(function($) {
       				$.fn.preload = function(options) {
       					var opts 	= $.extend({}, $.fn.preload.defaults, options),
       						o		= $.meta ? $.extend({}, opts, this.data()) : opts;
       					return this.each(function() {
       						var $e	= $(this),
       							t	= $e.attr('rel'),
       							i	= $e.attr('href'),
       							l	= 0;
       						$('<img/>').load(function(i){
       							++l;
       							if(l==2) o.onComplete();
       						}).attr('src',i);
       						$('<img/>').load(function(i){
       							++l;
       							if(l==2) o.onComplete();
       						}).attr('src',t);
       					});
       				};
       				$.fn.preload.defaults = {
       					onComplete	: function(){return false;}
       				};
       			})(jQuery);
       		</script>
               <script type="text/javascript">
       			$(function() {
       				var $ps_container		= $('#ps_container'),
       					$ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
       					$ps_next			= $ps_container.find('.ps_next'),
       					$ps_prev			= $ps_container.find('.ps_prev'),
       					$ps_nav				= $ps_container.find('.ps_nav'),
       					$tooltip			= $ps_container.find('.ps_preview'),
       					$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
       					$links				= $ps_nav.children('li').not($tooltip),
       					total_images		= $links.length,
       					currentHovered		= -1,
       					current				= 0,
       					$loader				= $('#loader');
   
       				var ie 				= false;
       				if ($.browser.msie) {
       					ie = true;
       				}
       				if(!ie)
       					$tooltip.css({
       						opacity	: 0
       					}).show();
   
       				var loaded	= 0;
       				$links.each(function(i){
       					var $link 	= $(this);
       					$link.find('a').preload({
       						onComplete	: function(){
       							++loaded;
       							if(loaded == total_images){
       								//all images preloaded,
       								//show ps_container and initialize events
       								$loader.hide();
       								$ps_container.show();
       								//when mouse enters the pages (the dots),
       								//show the tooltip,
       								//when mouse leaves hide the tooltip,
       								//clicking on one will display the respective image
       								$links.bind('mouseenter',showTooltip)
       									  .bind('mouseleave',hideTooltip)
       									  .bind("click",showImage);
       								//navigate through the images
       								$ps_next.bind("click",nextImage);
       								$ps_prev.bind("click",prevImage);
       							}
       						}
       					});
       				});
   
       				function showTooltip(){
       					var $link			= $(this),
       						idx				= $link.index(),
       						linkOuterWidth	= $link.outerWidth(),
       						//this holds the left value for the next position
       						//of the tooltip
       						left			= parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
       						//the thumb image source
       						$thumb			= $link.find('a').attr('rel'),
       						imageLeft;
   
       					//if we are not hovering the current one
       					if(currentHovered != idx){
       						//check if we will animate left->right or right->left
       						if(currentHovered != -1){
       							if(currentHovered < idx){
       								imageLeft	= 75;
       							}
       							else{
       								imageLeft	= -75;
       							}
       						}
       						currentHovered = idx;
   
       						//the next thumb image to be shown in the tooltip
       						var $newImage = $('<img/>').css('left','0px')
       												   .attr('src',$thumb);
   
       						//if theres more than 1 image
       						//(if we would move the mouse too fast it would probably happen)
       						//then remove the oldest one (:last)
       						if($ps_preview_wrapper.children().length > 1)
       							$ps_preview_wrapper.children(':last').remove();
   
       						//prepend the new image
       						$ps_preview_wrapper.prepend($newImage);
   
       						var $tooltip_imgs		= $ps_preview_wrapper.children(),
       							tooltip_imgs_count	= $tooltip_imgs.length;
   
       						//if theres 2 images on the tooltip
       						//animate the current one out, and the new one in
       						if(tooltip_imgs_count > 1){
       							$tooltip_imgs.eq(tooltip_imgs_count-1)
       										 .stop()
       										 .animate({
       											left:-imageLeft+'px'
       										  },150,function(){
       												//remove the old one
       												$(this).remove();
       										  });
       							$tooltip_imgs.eq(0)
       										 .css('left',imageLeft + 'px')
       										 .stop()
       										 .animate({
       											left:'0px'
       										  },150);
       						}
       					}
       					//if we are not using a "browser", we just show the tooltip,
       					//otherwise we fade it
       					//
       					if(ie)
       						$tooltip.css('left',left + 'px').show();
       					else
       					$tooltip.stop()
       							.animate({
       								left		: left + 'px',
       								opacity		: 1
       							},150);
       				}
   
       				function hideTooltip(){
       					//hide / fade out the tooltip
       					if(ie)
       						$tooltip.hide();
       					else
       					$tooltip.stop()
       						    .animate({
       								opacity		: 0
       							},150);
       				}
   
       				function showImage(e){
       					var $link				= $(this),
       						idx					= $link.index(),
       						$image				= $link.find('a').attr('href'),
       						$currentImage 		= $ps_image_wrapper.find('img'),
       						currentImageWidth	= $currentImage.width();
   
       					//if we click the current one return
       					if(current == idx) return false;
   
       					//add class selected to the current page / dot
       					$links.eq(current).removeClass('selected');
       					$link.addClass('selected');
   
       					//the new image element
       					var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
       											   .attr('src',$image);
   
       					//if the wrapper has more than one image, remove oldest
       					if($ps_image_wrapper.children().length > 1)
       						$ps_image_wrapper.children(':last').remove();
   
       					//prepend the new image
       					$ps_image_wrapper.prepend($newImage);
   
       					//the new image width.
       					//This will be the new width of the ps_image_wrapper
       					var newImageWidth	= $newImage.width();
   
       					//check animation direction
       					if(current > idx){
       						$newImage.css('left',-newImageWidth + 'px');
       						currentImageWidth = -newImageWidth;
       					}
       					current = idx;
       					//animate the new width of the ps_image_wrapper
       					//(same like new image width)
       					$ps_image_wrapper.stop().animate({
       					    width	: newImageWidth + 'px'
       					},350);
       					//animate the new image in
       					$newImage.stop().animate({
       					    left	: '0px'
       					},350);
       					//animate the old image out
       					$currentImage.stop().animate({
       					    left	: -currentImageWidth + 'px'
       					},350);
   
       					e.preventDefault();
       				}				
   
       				function nextImage(){
       					if(current < total_images){
       						$links.eq(current+1).trigger("click");
       					}
       				}
       				function prevImage(){
       					if(current > 0){
       						$links.eq(current-1).trigger("click");
       					}
       				}
       			});
               </script>
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204717)
 * Which line(s) do your browser’s console errors point at?
 *  Thread Starter [imnikkilee](https://wordpress.org/support/users/imnikkilee/)
 * (@imnikkilee)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204718)
 * Hmm the only errors I’m getting are lines 39, 45, and 249 and the errors read
   the same:
 * Uncaught TypeError: Property ‘$’ of object [object Window] is not a function
   (
   anonymous function)
 * The page is here if it helps to see:
    [http://jesszielonka.com/wordpress/portfolio/12-as-i-know-them/](http://jesszielonka.com/wordpress/portfolio/12-as-i-know-them/)
 * You’ll have to use an inspector to find the content as the CSS hides _div id=”
   ps\_container”_ (and the JS is supposed to make it reappear).
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204719)
 * Would you mind fishing out those lines and pasting the code here?
    It seems you’re
   missing [no-conflict wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers).
 *  Thread Starter [imnikkilee](https://wordpress.org/support/users/imnikkilee/)
 * (@imnikkilee)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204720)
 * Okay, the first two errors are from other JS that I have, not this one in particular
   that I’m trying to solve. But posted all anyway.
 *     ```
       <script type="text/javascript">
       //makes footer stick to bottom
       $(document).ready(function() {
       $("#footer").stickyFooter();
       });</script>
       ```
   
 * The problem there is in the $(document) line.
 *     ```
       <script tyle="text/javascript">
       $("img").mousedown(function(){
           return false;
       });
       </script>
       ```
   
 * The problem there is in the $(“img”) line.
 *     ```
       <script type="text/javascript">
       			$(function() {
       				var $ps_container		= $('#ps_container'),
       					$ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
       					$ps_next			= $ps_container.find('.ps_next'),
       ```
   
 * The problem there is in the $(function() line.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204721)
 * It seems with all errors you’re missing a no-conflict wrapper.
 *  Thread Starter [imnikkilee](https://wordpress.org/support/users/imnikkilee/)
 * (@imnikkilee)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204722)
 * Great, thanks!
 * I wasn’t aware of what the no-conflict wrapper was actually. I’m surprised that
   I was able to get jquery working on WordPress in the past without knowing about
   this. But I looked it up, added it in, and it’s working now, thanks!
 * Will always be adding from now on.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Trouble with Tympanus.net/codrops Jquery Tutorial’ is closed to new replies.

 * 8 replies
 * 2 participants
 * Last reply from: [imnikkilee](https://wordpress.org/support/users/imnikkilee/)
 * Last activity: [13 years, 6 months ago](https://wordpress.org/support/topic/trouble-with-tympanusnetcodrops-jquery-tutorial/#post-3204722)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics