We help IT Professionals succeed at work.
Get Started

What can I do to optimize this jQuery content gallery script?

ksymer
ksymer asked
on
598 Views
Last Modified: 2012-05-09
Hi Experts,

I am finishing up a "featured content gallery" adapted from the jQuery Tools scrollable and tooltip demos.  It finally does everything I need and seems to work in IE, FF, Safari, Chrome, and Opera.  But now the code could use some tweaking to help it run more efficiently and reduce page load time.  It is implemented in Drupal 6.  Data flows from CCK custom content type fields to a views template for use by jQuery.  This is my first time with jQuery and I would love to learn more about how to better structure this code. Any tips or modifications will be appreciated.

View demo [under development] at: http://www.tacoma.uw.edu/uwt/
// jQuery Tools functions for homepage feature

//use global var to store values from alt and title attributes
//so we can remove/empty them; this is needed ino order to disable browser's default tooltips
var myThumbImgAlt;
var myFullImgPath;

// execute your scripts when the DOM is ready. this is a good habit
$(document).ready(function() {

	//:random filter from http://blog.mastykarz.nl/jquery-random-filter/
	jQuery.jQueryRandom = 0;
	jQuery.extend(jQuery.expr[":"],
	{
		random: function(a, i, m, r) {
			if (i == 0) {
				jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
			};
			return i == jQuery.jQueryRandom;
		}
	});

	// initialize scrollable together with the tooltip 
	$("div.scrollable").find("a").tooltip({
		// use this single tooltip element for all trigger elements
		tip: '.tooltip',
		relative: true,
		offset: [320, 42],
		position: 'top center',
		cancelDefault: true, //doesn't prevent default tooltip in IE8
		predelay: 200,
		delay: 200
	});
		
	$(".items img").hover(function() {
			myThumbImgAlt = $(this).attr("alt");
			myFullImgPath = $(this).attr("title");
			//$(this).removeAttr("alt"); //doesn't prevent default tooltip in IE8
			//$(this).removeAttr("title"); //doesn't prevent default tooltip in IE8
			$(this).attr("alt", "");
			$(this).attr("title", "");
			//event.preventDefault(); //doesn't prevent default tooltip in IE8
		},
		function(event){
			//event.preventDefault(); //doesn't prevent default tooltip in IE8
			$(this).attr("alt", myThumbImgAlt);
			$(this).attr("title", myFullImgPath);

	});
	
	$(".items img").click(function() {
	
		// calclulate large image's URL from thumbnail title
		if(myFullImgPath === undefined){
			//we haven't hovered yet and the title is still in tact
			var url = $(this).attr("title");
		}else{
			//get large image's URL from local variable (title removed on hover)
			var url = myFullImgPath;
		};

		// get handle to element that wraps the image and make it semitransparent
		var wrap = $("#image_wrap").fadeTo("medium", 0.5);
		// the large image
		var img = new Image();
		// call this function after it's loaded
		img.onload = function() {
			// make wrapper fully visible
			wrap.fadeTo("fast", 1);
			// change the image
			wrap.find("img").attr("src", url);
		};
	

		// begin loading the large image
		img.src = url;

		//get right-side gradient background image from thumbnail class
		var bgColor = $(this).attr("class").replace("thumb_img bg_", "");
		var bgImageUrl = "url(sites/all/themes/uwt/css/theme/features/images/fpf-gradients/" + bgColor + ".png)";
		$("div#large_image_caption_bg").css("background-image", bgImageUrl);

		//get large image title and description from thumbnail content
		var htmlStr = $(this).parent().prev("div").html();
		$("div#large_image_caption_txt").html(htmlStr);
	
		//get large image href and alt attributes from thumbnail image
		var fullAltStr = $(this).attr("alt");
		var fullTitleStr = $(this).attr("alt");
		var fullHrefStr =  $(this).attr("longdesc");
		$("img#large_image").attr("title", fullTitleStr);
		$("img#large_image").attr("alt", fullAltStr);
		$("a#large_image_link").attr("href", fullHrefStr);
		$("a.caption_heading_anchor").attr("href", fullHrefStr);

		//unset .active from all thumbnails and add it to the clicked image for styling
		$("img.thumb_img").removeClass("active");
		$(this).addClass("active");
		


	// when page loads simulate a "click" on the first image
	//}).filter(":first").click();
	//let's change this to a random image per http://blog.mastykarz.nl/jquery-random-filter/
	}).filter(":random").click();
	

});//end document ready function

Open in new window

views-view-fields--front-page-fe.php
Comment
Watch Question
Software Engineer
Commented:
This problem has been solved!
Unlock 2 Answers and 5 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE