PDA

View Full Version : Featured Image Zoomer positioning



kennyd
01-25-2011, 07:10 PM
1) Script Title: Featured Image Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

3) Describe problem: Is there a way of positioning the magnifier other than left or right?

ddadmin
01-25-2011, 08:01 PM
The magnifier is absolutely positioned, so technically, yes. Where did you want it positioned?

kennyd
01-26-2011, 01:22 AM
I wanted to play around with the positioning. Possibly moving it down a bit and over to the right a bit.

jscheuer1
01-26-2011, 04:27 PM
The top and left of the magnify area are set absolutely in reference to the window. The script does so with consideration as to where the original image is, and to whether you've configured left or right in the call. This can be easily overridden. To do that, pick an arbitrary and unique id - say 'myarea'.

Put this stylesheet in the head of the page or add it's rule to an existing stylesheet for the page:


<style type="text/css">
.magnifyarea#myarea {
top: 322px!important;
left: 250px!important;
}
</style>

Change the top and left to be of your choosing. For an interesting effect you could add:


position: fixed!important;

Whatever you put in there should have the !important keyword as shown.

Then in your call to magnify:


jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
largeimage: 'hayden.jpg' //<-- No comma after last option!
});
$('.magnifyarea').last().attr('id', 'myarea');
});

You may repeat this process with other zoomers on the page (if any) and a different id. The added javascript must come after each call.

kennyd
01-26-2011, 09:09 PM
Works perfectly..thanks again

chermarie83
04-18-2011, 07:40 PM
...so i added this code, but every time i resize my browser the magnifier stays in that same coordinate. I want it to move relative to my browser size. can anyone help?

Thanks!

jscheuer1
04-19-2011, 07:49 AM
every time i resize my browser the magnifier stays in that same coordinate. I want it to move relative to my browser size.

The code in this thread is not intended to do that, only to provide more flexibility for the absolute position of the magnify area.

You appear to want a static or relatively positioned magnify area. This can be done, but it's complicated, or at least seems complicated to me. I think I have it worked out. But it looks to me as though it needs to be done in different ways depending upon the layout of the page.

Do you have a page setup? If so, gives us a link to it so I can see how best to adapt the solution I have to it.

chermarie83
04-19-2011, 07:42 PM
Hi John,

Thanks for your reply. Below is the link to one of the pages I'm working on. I'm working with very specific client and he wants to have the viewing area to appear over the original image.

example page: http://sugaboo.com/blend_website/bronzer_mbz01.html

I did a screen shot to show where the viewer needs to be, link below.

screen shot: http://sugaboo.com/screenshot.png

Thanks you so much for your help!

Cheery

jscheuer1
04-20-2011, 04:09 AM
That's actually a little simpler than I was imagining. Change this:


<style type="text/css">
.magnifyarea#myarea {
top: 148px!important;
left: 290px!important;
position: fixed!important;
}
</style>

to:


<style type="text/css">
.magnifyarea {
top: -66px!important;
left: 22px!important;
}
#mymag {
position: relative;

}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.magnifyarea {
left: -200px!important;
}
</style>
<![endif]-->

Change this:


<script type="text/javascript">

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

$('#image1').addimagezoom({
zoomrange: [10, 10],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'bronzer/mbz01.png' //<-- No comma after last option!
})
$('.magnifyarea').last().attr('id', 'myarea');

$('#image2').addimagezoom({
zoomrange: [10, 10],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'foundations/lid.png' //<-- No comma after last option!
})
$('.magnifyarea').last().attr('id', 'myarea');

})

</script>

to:


<script type="text/javascript">

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

$('#image1').addimagezoom({
zoomrange: [10, 10],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'bronzer/mbz01.png' //<-- No comma after last option!
})

$('#image2').addimagezoom({
zoomrange: [10, 10],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'foundations/lid.png' //<-- No comma after last option!
})
$('.magnifyarea').appendTo($('#mymag'));

})

</script>

Add this highlighted <div> as shown:


<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="450" height="450" align="center"><div id="mymag"></div><img src="bronzer/mbz01.png" width="373" height="307" /></td>
</tr>
<tr>
<td width="450" height="25">

<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80" height="65"><p><img id="image1" border="0" src="bronzer/mbz01.png" style="width:80px;height:65px" /><p></td>
<td width="80" height="65"><p><img id="image2" border="0" src="foundations/lid.png" style="width:80px;height:65px" />
<p></td>

<td width="290" height="65" class="zoom_style"><img src="image/zoom.png" width="150" height="65" /></td>
</tr>
</table>

</td>
</tr>
</table>

Notes:

The only thing I'm not like 90% certain of is:


<!--[if lt IE 7]>
<style type="text/css">
.magnifyarea {
left: -200px!important;
}
</style>
<![endif]-->

That style is for IE 6 and less (anything less than IE 7, lt IE 7). I cannot really test if it's accurate as my local copy of your page won't load in my IE 6. That's probably due to something loaded for IE 6 that has to be live, like a png fix thing. But I couldn't track it down. I had to make some assumptions and guesses as to that lt IE 7 style. It could be wrong. Once it's live with these changes I (or you if you have IE 6 and care about it) can check it. Let me know.


There are other problems with the page that you may or may not already be aware of and intend to fix. The rollover.js file has an HTML header and some other HTML tags so doesn't load. If you mean to use it, it should have only the script code in it:


function newImage( imgSrc ){

var imgName = new Image();
imgName.src = imgSrc;

return imgName;

}

function change( imgName, imgLocation )
{
document[imgName].src = imgLocation ;
}

var preloadFlag = false;
function loadImages()
{
if (document.images)
{
buttonhome1 = newImage("foundations/tinyhover_mf_01.png");


preloadFlag = true;

changeImage();
}
}

If you don't mean to use it (I don't think you do as at least some rollover duties appear to be being done by something else), it's external script tag on the page:


<script language="JavaScript" src="rollover.js"></script>

and any references to its functions on the page or in the page's scripts (I couldn't find any) should be removed.


Using so many .png is wasteful. You could substitute high resolution .jpg and save a lot of load time/bandwidth. The smaller images should be smaller images, not resized from the larger ones by the browser.


The spinningred.gif (the loading image for Featured Image Zoomer) is a 404 Not Found.


There could be other things. These are just what jumped out at me.


Any problems with the modifications to the Featured Image Zoomer script, let me know.

chermarie83
04-20-2011, 05:46 PM
thank you so much!

so .png is not good to use? i always thought and taught it was, but i guess I'm wrong.

also, if i change the images into different sizes wouldn't that make the site slower since i have 3 sizes of the same image or no?

djr33
04-20-2011, 07:16 PM
.png files aren't necessarily bad. But it's good to know which formats are most efficient. .png files are larger filesize and higher quality than jpgs and gifs. Is that what you want? Also, I think John was suggesting that you only use images on your page that are the correct resolution. These are called thumbnails-- smaller preview copies of your images that will load quickly.

Here's a recent blog post that mentions something about the image formats:
http://www.dynamicdrive.com/forums/blog.php?b=243

However, an even simpler answer is this: try saving your images in several formats. Look at the results. Then pick the one that is the smallest filesize and still looks ok. But knowing the differences in the formats will save you a lot of time in testing that.

For a thumbnail, I suggest jpg unless your images are very simple (graphic patterns, not photos)-- if so, maybe gif would be smaller. pngs are a waste because they are a high quality format and a thumbnail doesn't need to look perfect.


As for duplicating an image, that's a good question. If you load a full size image and a small image and they are otherwise identical, then the fastest way will be to use the same image file for both. However, the small image (thumbnail) will be a very small file and won't take much time to load anyway, so it wouldn't hurt much to use different files. And, importantly, the browser will have to use extra memory and will probably resize the image badly (compared to an image editing program) so you will get a better looking page using properly sized images.
And if the images are not on the same page, then each page will load faster with images that are sized for that page. It will add up to a little more bandwidth overall, but it's no fun to wait on a slow connection while lots of small-resized large images are loading.

jscheuer1
04-21-2011, 06:23 AM
That's all essentially correct. However, if .gif (.gif is limited to 256 colors or less) is good, a 256 colors or less .png is just as good looking and often even less bytes. There are various categories of .png. One choice is between a .png with 16 million colors that's capable of alpha channel opacity. The other is a .png that can have single color transparency and no more the 256 colors, essentially just like a .gif. It's this second choice that can often be smaller than .gif. It depends upon the image itself. And depending upon the image, .jpg might still be better than either .gif or .png.

But I think you both may have missed a little of what I was trying to say about the bandwidth. If for the larger images you use .jpg, even fairly high resolution ones, chances are it will be less bytes than the .png. Then for the thumbnails you can use whatever format is the clearest and smallest, in this case probably a 256 color or less .png. The overall bytes will still be less than it is now, and the page will load faster. If you set the zoomer up like that, there will be loading time the first time the thumbnail that activates it is hovered. There is a loading image for that, but it wasn't on the server. Even the way it is now, that image will sometimes be needed. You also could preload the larger images. If done after page load, that would allow them to load more quickly (as quickly as they do now) when the zoomer is activated, but not delay the initial loading of the page, as they do now.

Even without any of that, if you were to at least make the thumbnails that link to other pages separate, smaller images, that would save a lot of loading time.