WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Trouble with Tympanus.net/codrops Jquery Tutorial (9 posts)

  1. imnikkilee
    Member
    Posted 1 year ago #

    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/

    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!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Could you post here the JavaScript that you think is problematic?

  3. imnikkilee
    Member
    Posted 1 year ago #

    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>
  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which line(s) do your browser's console errors point at?

  5. imnikkilee
    Member
    Posted 1 year ago #

    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/

    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).

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Would you mind fishing out those lines and pasting the code here?
    It seems you're missing no-conflict wrappers.

  7. imnikkilee
    Member
    Posted 1 year ago #

    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.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    It seems with all errors you're missing a no-conflict wrapper.

  9. imnikkilee
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic