qtip for dynamic images & content

[cooldeeps]

We are working for an university faculty webpage with the following requirement:
A grid of 18 dynamic full-color images of professors is pulled from a database and displayed as list items using PHP and floated in rows of six. When the page is loaded the images should all appear in grayscale. The gray scaling is done with the help of pixastic library (desaturate function) http://www.pixastic.com/. On mouseover each individual image should appear in color and display the qtip with information of the particular professor to which the mouse is pointing. On mouseout the qtip should disappear and the image needs to turn back to grayscale.

The database consist of rows for each individual professor with information such as their ID# name, image, short bio. The ID# is the primary key for the table and we have built up an array such that after calling the ID number the information of the particular professor is displayed. The div block displaying the information is “display: none” so that it hides on page load.

We are facing two problems for the qtip.
1) The data appears in the qtip when using the $("id").text() jquery function, but because it is raw text, we are unable to add CSS styles; when using the $("id").html(), the data is hidden because of the display:none applied to the div.
2) If we rapidly rollover the images, multiple qtips appear and do not disappear.

Could someone help us out in resolving this? The PHP and qtip codes are given below:

PHP Code

PHP Code

$FacultyIDList = array (
		"SP000092", “SP0023375", "SP000012",…);
	$CourseList = array (
		"15.701", "15.714", .....);
 
<ul id="faclist"> 
<?
		for($i=0; $i<=17; $i++)  { ?>
		<li class="person" id="<?= $FacultyIDList[$i]?>"><a style="text-decoration:none;"href="/faculty/detail.php?in_spseqno=<?=$FacultyIDList[$i]?>&co_list=F">
		<? 
		$img_file = GetHeadShotImage($FacultyIDList[$i]);
		$personinfo = GetFacultyInfo($FacultyIDList[$i]);
		$fullname = $personinfo["FULLNAME"];
		$Abberbio = $personinfo["ABBREVIATEDBIO"];
		$finfo = array($fullname,$CourseList[$i],$Abberbio);
		echo '<div class="facinfo" style="display:none;"><h3>'.$finfo[0].'</h3>';
		echo '<p class="course">'.$finfo[1].'</p>';
		echo '<p class="biobit">'.$finfo[2].'</p></div>';
 
			if ($img_file != "") { ?>
				<img src="<?=$img_file?>" alt="<?=$personinfo["FULLNAME"]?>" class="gray" width="108" o<strong></strong>nload="desaturate(this);"
				o<strong></strong>nmouseout="desaturate(this);"/></a></li>
		<? } 	 } 	?></ul>

Qtip Code:

JS Code

<script type="text/javascript">
 
$(document).ready(function(){
 
	$('li.person').each(function() {
	$(this).qtip({
		content: $(this).text(),
		show: 'mouseenter',
		hide: {
			when: 'mouseleave',
			fixed: true
			},
		style: {
			tip: { .....}
},
                position: {...},
});
 
 
	$(".gray").mouseenter(
	function () {
	Pixastic.revert(this);
	});
});
});
 
 
function desaturate(img) {
Pixastic.process(img, "desaturate");
$(".gray").mouseenter(
	function () {
	Pixastic.revert(this);
	});
}
 
</script>

[kiddailey]

Have you tried setting your content selector to:

JS Code

$(this).find('div.facinfo').html()

And I seem to recall an issue with qTip1 and rapidly navigating over a bunch of triggers. It could be because you're setting show and hide properties to a string rather than an object though. But you also might want to try setting show.solo:

JS Code

show: {
     solo: true,
     when: {
          event: 'mouseenter'
     }
},
hide: {
     when: {
          event: 'mouseleave'
     },
     fixed: true
}

[cooldeeps]

@ Kiddailey,

Thanks for the reply. I tried to do what you suggested in your post. But it dint help me.
Although one improvement we made further is that we were able to style the content within the qtip, which was merely a CSS issue.

The multiple qtip triggering issue still exists. It would be great if someone looks into our attached code and give little hints on what could be done.

Thanks

(6th May 01:57)kiddailey Wrote:  Have you tried setting your content selector to:

JS Code

$(this).find('div.facinfo').html()

And I seem to recall an issue with qTip1 and rapidly navigating over a bunch of triggers. It could be because you're setting show and hide properties to a string rather than an object though. But you also might want to try setting show.solo:

JS Code

show: {
     solo: true,
     when: {
          event: 'mouseenter'
     }
},
hide: {
     when: {
          event: 'mouseleave'
     },
     fixed: true
}