PDA

View Full Version : Featured Image Zoomer v1.5 Chrome?



umarkal
09-09-2011, 06:35 PM
Featured Image Zoomer v1.5 doesnt work on google chrome.

Any idea?

jscheuer1
09-09-2011, 07:23 PM
Please post new questions in a new thread like here where I've moved this, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post (http://www.dynamicdrive.com/forums/showpost.php?p=7) for more information.

That said -


Featured Image Zoomer v1.5 doesnt work on google chrome.

Any idea?

It does work for me in Google Chrome here:

http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

How about for you? If so, I imagine it might be something with the page you're working on. If not, likely something with your Chrome browser or something affecting it on your system.

If the:

http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

page works in Chrome for you and you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

umarkal
09-09-2011, 07:39 PM
Please post new questions in a new thread like here where I've moved this, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post (http://www.dynamicdrive.com/forums/showpost.php?p=7) for more information.

That said -



It does work for me in Google Chrome here:

http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

How about for you? If so, I imagine it might be something with the page you're working on. If not, likely something with your Chrome browser or something affecting it on your system.

If the:

http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

page works in Chrome for you and you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

www.5star-drycleaners.com and visit the about us page. Scroll down and hover the 6 images

sometime it works sometime it doesnt.

jscheuer1
09-10-2011, 02:59 AM
It doesn't appear to work consistently in any browser except IE. A major problem is that since the images take so long to load, the browser can't get the height in time. IE doesn't have this problem because it gets the width and height from an image immediately. All others wait until it has loaded.

That much can be fixed by specifying the height for these images:


<img id="image1" border="3" src="images/P1.jpg" width="250" height="333"
alt=""/><img id="image2" border="3" src="images/P2.jpg" width="250" height="333"
alt="" style="margin-left: 30px;"/>
<br />
<img id="image3" border="3" src="images/P3.jpg" width="250" height="333"
alt=""/><img id="image4" border="3" src="images/P4.jpg" width="250" height="333"
alt="" style="margin-left: 30px;"/>
<br />
<img id="image5" border="3" src="images/P5.jpg" width="250" height="333"
alt=""/><img id="image6" border="3" src="images/P6.jpg" width="250" height="333"
alt="" style="margin-left: 30px;"/>

Also - a fine point as browsers will generally error correct this for you, you shouldn't use px when specifying dimensions as attributes. The px (or other appropriate) units are required for style dimensions. But attribute dimensions should be either digits only without units when representing pixels or a percentage with the % sign.

A suggestion here would be to make 250x333 versions of these images to use on the page. It will load much faster. But you would still need to specify their width and height.



But there's still at least one other major problem in non-IE browsers. I'm not certain of the reason, perhaps because the page fails validation, the script is unable to determine the vertical offset of the images. As a result the trigger areas for the zoom effect are too high up on the page. Try validating the page, that might fix that.

In case you don't know about validation, it's simply ensuring that the code you're using follows standards. A useful tool for that is located here:

http://validator.w3.org/

jscheuer1
09-10-2011, 06:26 AM
OK, I got bored. This is valid and works cross browser:

Demo (http://home.comcast.net/~jscheuer1/side/featuredimagezoomer/5star_h.htm)


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>5 Star Dry Cleaners</title>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<style type="text/css">
#header, object, .wrapper, #footer {
margin: 0 auto;
}
#footer {
width: 880px;
clear: both;
}
.zoomer {
border: 3px solid #000;
display: inline-block;
margin-bottom: 5px;
}
.zoomer img {
vertical-align: top;
}
.ml30 {
margin-left: 30px;
}
</style>
</head>

<body>
<br />
<div id="header">

<img src="images/top.png" alt="" height="57" width="850"/>

<br /><br />
<!-- Flash Navigation -->
<object width="850" height="64" data="flash/Navigation%20Using%20Action%202.swf" type="application/x-shockwave-flash">
<param name="wmode" value="transparent">
<param name="movie" value="flash/Navigation%20Using%20Action%202.swf">
</object>
<br /><br />
<!-- Flash Navigation -->

<!-- <style type="text/css">

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 5px #818181;
-webkit-box-shadow: 5px 5px 5px #818181;
-moz-box-shadow: 5px 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style> -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!--[if lt IE 8]>
<style type="text/css">
.zoomer {
display: inline;
}
#footer {
position: absolute;
top: expression(jQuery('.zoomtracker').size()? jQuery('.zoomtracker').last().offset().top + jQuery('.zoomtracker').last().height() + 10 + 'px' : 0);
left: 50%;
margin-left: -440px;
padding-bottom: 10px;
}
</style>
<![endif]-->

<script type="text/javascript" src="featuredimagezoomer.js">

//***********************************************
//* Featured Image Zoomer (w/ adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
//* This notice MUST stay intact for legal use
//* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
//***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){

$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://5star-drycleaners.com/images/P1.jpg' //<-- No comma after last option!
})

$('#image2').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://5star-drycleaners.com/images/P2.jpg' //<-- No comma after last option!
})

$('#image3').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://5star-drycleaners.com/images/P3.jpg' //<-- No comma after last option!
})

$('#image4').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://5star-drycleaners.com/images/P4.jpg' //<-- No comma after last option!
})

$('#image5').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://5star-drycleaners.com/images/P5.jpg' //<-- No comma after last option!
})

$('#image6').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://5star-drycleaners.com/images/P6.jpg' //<-- No comma after last option!
})
})

</script>

<div class="wrapper">
<div id="container">

<div id="left">


<p><img src="images/Calls.png" style="border: 2px dashed black;" width="287" height="57" alt=""/><hr>

<object width="298" height="100" type="application/x-shockwave-flash" data="flash/bridal.swf">
<param name="wmode" value="transparent">
<param name="movie" value="flash/bridal.swf">
</object>

<hr>

<object width="298" height="100" type="application/x-shockwave-flash" data="flash/delivery.swf">
<param name="wmode" value="transparent">
<param name="movie" value="flash/delivery.swf">
</object>

<hr>


</div>

<div id="right">
<h3>About Us</h3>
<img src="images/shopfront.jpg" width="300" height="225" alt=""/>


<p>5 Star is the stars choice when they want to ensure everything is all white on the night. We have been established for over 40 years and our high level of service has meant that our customers expect nothing but the best from us.</p>
<p>Altaf Ahmed, owner of 5 Star Dry Cleaners has seen everyone from Cherie Blair to Stephen Fry come through the door over the past 40 years.</p>
<p>Altaf Ahmed quoted, <br />
"When I first opened we had a lot of members of the local Adams family and their acquaintances come in and now we also have a lot of judges and barristers coming in like the Lord Chief Justice, Lord Woolf so we have a diverse cliental to say the least! We also have quite a few newscasters like Jon Snow and Adam Bolton from Sky."</p>
<p>Other famous faces who have made an appearance to 5 Star are Linda Robson (Birds of a feather), Joe Swash (Easterners), the boxing promoter Frank Warren, and Margaret Hodge (Labour MP for Barking).</p>

<p>The business has been recommended as the place to get your Dry Cleaning done in London in the Independent's style column and by the Evening Standard.</p>

<h3>We're famous! Take a look at what has been said about us in local as well National Papers and Magazines.</h3>

<div class="zoomer"><img id="image1" src="images/P1.jpg" width="250" height="333"
alt=""/></div><div class="zoomer ml30"><img id="image2" src="images/P2.jpg" width="250" height="333"
alt=""/></div>
<br />
<div class="zoomer"><img id="image3" src="images/P3.jpg" width="250" height="333"
alt=""/></div><div class="zoomer ml30"><img id="image4" src="images/P4.jpg" width="250" height="333"
alt=""/></div>
<br />
<div class="zoomer"><img id="image5" src="images/P5.jpg" width="250" height="333"
alt=""/></div><div class="zoomer ml30"><img id="image6" src="images/P6.jpg" width="250" height="333"
alt=""/></div><br /><br />
</div>

<br />


</div>

</div>
</div>


<br /><br /><br /><br />
<div id="footer"><hr>

<div id="tnp">
<a href="Terms%20and%20Conditions.php" class="tnplink">Terms and Conditions</a>|
<a href="Privacy%20Policy.php" class="tnplink">Privacy Policy</a>
</div>

<div class="copyright">
5 Star Dry Cleaners - All rights reserved<br />
Created By Umar Kaleem
</div>

<div class="flashplayer">Website Requires Adobe Flash Player<br /><a href="http://get.adobe.com/flashplayer/">Download Now</a></div>

<br /><br /><br />
<div class="copyright1">
&copy; 5 Star Dry Cleaners 2011 - 5 Star Dry Cleaners, Islington, London, N1 0PB - Company Registration Number: 1160348 - VAT Number: 14 17 875 618
</div>
</div>

</body>
</html>

Notes: Firefox was actually very skittish. I think it doesn't like the Flash menu. It's because of its reaction to it that the scripts need to be after it in the body.

Also it couldn't tolerate the three stylesheets from Google. Fortunately the page either wasn't really using them, or at least doesn't need them.

It would still be a good idea to make resized and optimized versions of the 6 newspaper/magazine images. Use a good image editing program. Make them 250x333 and use those in the markup in the body. You should of course keep the larger versions for use in the script area:


<script type="text/javascript">

jQuery(document).ready(function($){

$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://5star-drycleaners.com/images/P1.jpg' //<-- No comma after last option!
})

$('#image2').addimagezoom({
zoomrange . . .

And you would do well to make a resized optimized version of shopfront.jpg and use it instead of that huge image you have there. Make it 300x225.

Doing this for these 7 images will greatly reduce loading time for the page.