Printable View
I have a shopping cart application that is using a jquery for hover function. However.. before I conplete that function, I want to varify that the file does indeed exist on the server. Is there a jquery out there someplace to do this??
The hover event brings back a large jpg verses the thumbnail.
Thanks
gollnick
Use $.get() against the URL.
$.get("someimage.jpg", function(data){//Loaded, yay});
The function is where you'd take that image and put it somewhere.
Hey,
And here is some documentation for the above...
http://docs.jquery.com/Ajax/jQuery.get
Gary
Ok ... I have identified which images in the datagrid HAVE a thumbnail and a larger image.
(see the first document)
<table class="grouplist" cellspacing="0" cellpadding="3" align="Justify" rules="rows" border="1" id="dgCust" style="background-color:LightGoldenrodYellow;border-color:#E7E7FF;border-width:1px;border-style:None;width:804px;border-collapse:collapse;z-index: 103; position: absolute;
top: 213px">
<tr align="left" style="color:#4A3C8C;background-color:#E7E7FF;">
<td colspan="4"><span>1</span></td>
</tr><tr style="color:#F7F7F7;background-color:#4A3C8C;font-weight:bold;">
<td> </td><td> </td><td> </td><td> </td>
</tr><tr style="color:#4A3C8C;background-color:#E7E7FF;">
<td>
<p>
<input type="image" name="dgCust$ctl03$Img1" id="dgCust_ctl03_Img1" class="smallImage" src="http://localhost:1488/Web_Swanson_Shopping/Graphics/ALL.jpg" style="height:124px;width:156px;border-width:0px;" />
</p>
<p>
<a id="dgCust_ctl03_lnk1" href="javascript:__doPostBack('dgCust$ctl03$lnk1','')">All Groups of Merchandise </a>
</p>
</td><td>
<input type="image" name="dgCust$ctl03$Img2" id="dgCust_ctl03_Img2" src="http://localhost:1488/Web_Swanson_Shopping/Graphics/AUTO.jpg" style="height:124px;width:156px;border-width:0px;" />
<br />
<br />
<a id="dgCust_ctl03_lnk2" href="javascript:__doPostBack('dgCust$ctl03$lnk2','')">Automobile Parts and Supplies </a>
</td><td>
<input type="image" name="dgCust$ctl03$Img3" id="dgCust_ctl03_Img3" class="smallImage" src="http://localhost:1488/Web_Swanson_Shopping/Graphics/CABLES.jpg" style="height:124px;width:156px;border-width:0px;" />
<br />
<br />
<a id="dgCust_ctl03_lnk3" href="javascript:__doPostBack('dgCust$ctl03$lnk3','')">Cables - big and little </a>
</td><td>
<input type="image" name="dgCust$ctl03$Img4" id="dgCust_ctl03_Img4" class="smallImage" src="http://localhost:1488/Web_Swanson_Shopping/Graphics/ELECTRONICS.jpg" style="height:124px;width:156px;border-width:0px;" />
<br />
<br />
<a id="dgCust_ctl03_lnk4" href="javascript:__doPostBack('dgCust$ctl03$lnk4','')">Electronic parts and supplies </a>
</td>
</tr>
Those WITH a large image have a class
class="smallImage"
The javascript on my page needs to identify which image being hovered over has this class (class="smallImage").
Here is the code I'm trying (and getting very frustrated over)
<script type="text/javascript">
$(document).ready(function(){
$("img#popUpImage").click( function() {
$.modal.close();
$("img#popUpImage").attr("src", "");
});
$("input.smallImage").attr("title", "Hover over to magnify.");
//trying to make this if statement work right here)
if ($("input[class=='smallImage' ]"))
{
$("input[ id^='dgCust_ct' ]").hover(function() {
$(this).oneTime( 1500, function() {
// Fetch the image from the current img tag.
var bigImageName = $(this).attr("src");
bigImageName = bigImageName.replace( /\.jpg$/i, "Big.jpg");
$("img#popUpImage").attr("src", bigImageName);
$("div#popUpImageBox").modal({ overlay: 80, closeHTML: "close",
overlayCss: { backgroundColor: "#333" }
});
});
});
}; // added
$("input[ id^='dgCust_ct' ]").mouseleave( function() {
$("input[ id^='dgCust_ct' ]").stopTime();
});
$("input[ id^='dgCust_ct' ]") .click( function() {
$("input[ id^='dgCust_ct' ]").stopTime();
});
});
</script>
help
gollnick
Hey,
Can you go back and edit your post and surround your code in CODE tags? It makes it so much easier to read!!
Can you also explain what exactly isn't working for you just now?
Gary
I'm sorry.....
I am trying to get this if statement to work..
if ($("input[class=='smallImage' ]"))
{
where class=='smallImage' is assigned to the cssclass of an image control IF there is a large image associated with a thumbnail.
This is the "view source" during runtime that I am trying to use against
<td>
<input type="image" name="dgCust$ctl03$Img1" id="dgCust_ctl03_Img1" class="smallImage" src="http://localhost:1488/Web_Swanson_Shopping/Graphics/ALL.jpg" style="height:124px;width:156px;border-width:0px;" />
<a id="dgCust_ctl03_lnk1" href="javascript:__doPostBack('dgCust$ctl03$lnk1','')">All Groups of Merchandise </a>
</td><td>
<input type="image" name="dgCust$ctl03$Img2" id="dgCust_ctl03_Img2" src="http://localhost:1488/Web_Swanson_Shopping/Graphics/AUTO.jpg" style="height:124px;width:156px;border-width:0px;" />
<a id="dgCust_ctl03_lnk2" href="javascript:__doPostBack('dgCust$ctl03$lnk2','')">Automobile Parts and Supplies </a>
</td>
I do not wish to process the function IF the class does not equal "smallImage"
Does this make any more sense?
gollnick
Hey,
I think your best bet would be to use .hasClass:
http://docs.jquery.com/Frequently_Asked_Questions#How%5Fdo%5FI%5Ftest%5Fwhether%5Fan%5Felement%5Fhas%5Fa%5Fparticular%5Fcla ss.3F
Hope that helps!!
Gary
Gary .. yes .. that did it .. thank you....
gollnick
Hey,
Not a problem at all, happy to help!!
Remember to follow the links in my thread to close off your thread, i.e. mark resolved, rate helpful posts, and tag your thread.
Gary