Jump to content

Recommended Posts

Hello Everyone,

I have a javascript function in my library that allows another larger window to be opened when a user clicks on a thumbnail image. The function is as follows:

 

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

 

The javascript that calls the function has an if statement within it that displays a thumbnail (if it exists) or a generic No Photo image if the user did not upload an image. The code for this is as follows:

 

<TD>
<a href="'uploads/'.$row_products['product_id'].'a.jpg'" onClick="MM_openBrWindow('<?php echo 
'uploads/'.$row_products['product_id'].'a.jpg' ?>','','width=600,height=450'); return false"> <?php 
	if (file_exists('uploads/'.$row_products['product_id'].'a.jpg')) { ?> 
		<img src="<?php echo 'uploads/'.$row_products['product_id'].'a.jpg'; ?>" width="132" height="99" border="0"><?php ; 

		} else { ?>

		<img src="<?php echo 'images/no_photo.gif'; ?>" width="132" height="99" border="0"><?php ; 
} ?>
</TD>

 

If there is a thumbnail, it will be displayed and when a user clicks on the image (which is also a link) a new window opens displaying the full size image. This works well except that when the user has not uploaded an image (and therefore the No Photo image is displayed) if they click on that image, a new window opens and the user is greeted with an Object Not Found error message. I don't think may users would click on the No Photo image, but I would like their experience to be a bit better. I have attempted several versions of the following code and can't get any of them to work. The code is:

 

<TD>
<a href="'uploads/'.$row_products['product_id'].'a.jpg'" onClick= <?php 
if (file_exists('uploads/'.$row_products['product_id'].'a.jpg')) { 
	?> "MM_openBrWindow('<?php echo 'uploads/'.$row_products['product_id'].'a.jpg'; ?>', '', width=600,height=450'); return false"> <?php ; 

		} else { 

		?> <a href="javascript:void(0);"> <?PHP // WANT TO HAVE "NO LINK" WHEN THERE IS NO PHOTO FOR THE ITEM
} 
		if (file_exists('uploads/'.$row_products['product_id'].'a.jpg')) { 
		?><img src="<?php echo 'uploads/'.$row_products['product_id'].'a.jpg'; ?>" width="132" height="99" border="0"><?php ; 

			} else { 

			?><img src="<?php echo 'images/no_photo.gif'; ?>" width="132" height="99" border="0"><?php ; 
}  ?>
</a>
</TD>

 

Here I'm trying to use two if statements, one to display the thumbnail or No Photo image and another to either open a new window and display the full size image or in the case that the user has not uploaded a photo, a Null Link (which should not allow the user to follow the link). There is no reason a user should be able to follow a link to nowhere.

 

What happens is that when I place the cursor over the thumbnail or the No Photo image, I can see the ...uploads/'.$row_products['product_id'].'a.jpg in the component bar (which is normal), but clicking on either type of thumbnail (real or No Photo), does not open another window. Instead, the user lands on a page displaying an Object Not Found error message in the existing window. The address bar then displays something such as http://www.siteName/uploads/'.$row_products['product_id'].'a.jpg - not the resolved address. It is as if the dynamic product_id is not passed along.

 

This confuses me, I don't know why the product_id would not be passed, or is the problem something else entirely? Is the function unable to handle the if statement in the call to  MM_openBrWindow? If someone could give me an idea of what the problem is, I'd really appreciate it!

Cheers,

Rick

I can see the ...uploads/'.$row_products['product_id'].'a.jpg in the component bar (which is normal)

 

That doesn't sound normal at all! It is because your href (which is never followed because of the return false) is set to that string. It has no use!

 

I recommend doing the logic before the output since you have multiple checks:

 

<?php
$image = 'uploads/'.$row_products['product_id'].'a.jpg';
if (file_exists($image))
$link = 'Javascript:MM_openBrWindow(\''.$image.'\',\'\',\'width=600,height=450\');';
else
{
$link = 'Javascript://';
$image = 'image/no_photo.gif';
}
?>
<a href="<?php echo $link; ?>"><img src="<?php echo $image; ?> width="132" height="99"/></a>

 

The border attribute of img is deprecated. You should set that in your style sheet.

 

 

P.S. What are you doing still using Macromedia libraries!?  :P

Hi Lemmin,

Thank you for the quick reply! Using a PHP function instead of inserting PHP into the html makes a lot more sense, I don't know why I didn't try that. Usually I default to PHP (I'd rather write it than anything else). I was using a couple of pages created in a Dreamweaver class I took years ago as a model. For the most part it has the functionality I wanted, but it needs to have all kinds of crap pulled out of the code (it's full of html formatting and unneeded javaScript too). For most of the work I'm doing I've been able to use scripts from PHP and MySQL Web Development by Welling and Thomson (which is a great book), but they don't have product list and product detail pages to use as a model. Thanks again, I'll implement the PHP function!

Cheers,

Rick

Please don't tell me DW still uses href="javascript:"? Doing it this way, instead of properly using the onclick insitric event, is bad practise, and outdated decades ago. Not only because it blocks any normal functionality if the user does not have JS (activated), but it also violates the standards.

 

Set the href attribute to the path of the full picture, and then use the onclick attribute for the JS.

 

Same with this line, btw:

<a href="javascript:void(0);"> <?PHP // WANT TO HAVE "NO LINK" WHEN THERE IS NO PHOTO FOR THE ITEM

 

Not only should it have read <a href="#" onclick="return false">, but if you don't want a link then you shouldn't create one. A simple span or just plain nothing would have been better in this case.

Hello ChristianF,

Thank you for the updated info - the last time I took a Dreamweaver class it was for CS4, but that is fairly recient and Adobe / Macromedia should not be using stone-age standards. I'll update the functionality to the most current standard. As I mentioned to Lemmin, I'm really surprised that I didn't approach the problem from a PHP perspective. I didn't have a model I liked and so was relying on the Dreamweaver "product detail page" as a model - I think my problem is that first I must wrap my head around the approach Dreamweaver uses (I can't think like those guys!). Thanks again!

 

Hi Lemmin,

The code you wrote looked pretty much perfect when I read it and so I didn't report the results (for anyone interested). There were a couple of tiny errors in the script, so I want to publish this for anyone who needs this type of functionality...

 

<?php
$image = 'uploads/'.$row_products['product_id'].'a.jpg';
if (file_exists($image))	{

$link = 'Javascript:MM_openBrWindow(\''.$image.'\',\'\',\'width=600,height=450\');';

} else {	

$link = 'Javascript://';	

$image = 'images/no_photo.gif';
} ?>
<a href="<?php echo $link; ?>"><img src="<?php echo $image; ?>" width="132" height="99"/></a>

 

There was a double quotation mark missing and the word image was missing the S, but the script was fine otherwise. Thank you very much for the help!

Cheers,

Rick

I note that javascript: is still used as the target URI. :P

Here's a better version:

 

$image = 'uploads/'.$row_products['product_id'].'a.jpg';

if (file_exists ($image)) {
    $thumnailPath = str_replace ("a.jpg", "a_thumb.jpg", $image);
    $imageLink = "<a href=\"$image\" onclick=\"return imageWindow ($image);\"><img src="$thumbnailPath"></a>\n";
} else {
    $imageLink = '<img src="images/no_photo.gif">';
}

 

With this you only need to echo out $imageLink wherever you want the actual image, and make a thumbnail for the picture.

 

I've also used the following JS function, instead of the useless DW wrapper function:

function imageWindow ($URL) {
    window.open ($URL, 'image', '', 'width=600,height=450');
    return false;
}

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.