son Posted July 30, 2009 Share Posted July 30, 2009 I would like to learn how to do a photo effect as on:http://www.vaughandesigns.com/site/item.cf...=4&parent=1What is this sort of thing called? Then I can find hopefully a JavaScript tutorial...Son Link to comment Share on other sites More sharing options...
Ingolme Posted July 30, 2009 Share Posted July 30, 2009 There's no specific name for that. It's just a dynamic idea they came up with.They have a box with a larger version of the image inside. The overflow property is set to hidden. They use Javascript to detect the position of the mouse over the first image, and use scrollTo() to scroll to the right position based on where the mouse is on the first image. Link to comment Share on other sites More sharing options...
son Posted July 30, 2009 Author Share Posted July 30, 2009 There's no specific name for that. It's just a dynamic idea they came up with.They have a box with a larger version of the image inside. The overflow property is set to hidden. They use Javascript to detect the position of the mouse over the first image, and use scrollTo() to scroll to the right position based on where the mouse is on the first image.What do you mean by inside? The larger cutout appears to right of image you hover over. Bit lost...Son Link to comment Share on other sites More sharing options...
boen_robot Posted July 30, 2009 Share Posted July 30, 2009 What do you mean by inside? The larger cutout appears to right of image you hover over. Bit lost...SonClick "View Source", or open up the page with Firefox after disabling CSS and JavaScript, and you'll see that the large image appears right below the small one.With CSS, they hide the big image. With JavaScript, they isolate the image in a separate, newly creted box, and then unhide the image, scrolling to a certain part of it.Such utilities are reffered to as "zoomers", becaus they "zoom" on an image. A recent article at sitepoint showcased a few such plug-ins for jQuery. If you use jQuery anyway, those would be fine editions. The one I like in particular (accessibility wise) is jqZoom. Link to comment Share on other sites More sharing options...
son Posted July 30, 2009 Author Share Posted July 30, 2009 Click "View Source", or open up the page with Firefox after disabling CSS and JavaScript, and you'll see that the large image appears right below the small one.With CSS, they hide the big image. With JavaScript, they isolate the image in a separate, newly creted box, and then unhide the image, scrolling to a certain part of it.Such utilities are reffered to as "zoomers", becaus they "zoom" on an image. A recent article at sitepoint showcased a few such plug-ins for jQuery. If you use jQuery anyway, those would be fine editions. The one I like in particular (accessibility wise) is jqZoom.How do you disable CSS in Firefox? I know it only for JavaScript...Son Link to comment Share on other sites More sharing options...
boen_robot Posted July 30, 2009 Share Posted July 30, 2009 How do you disable CSS in Firefox? I know it only for JavaScript...SonIf you have the "Web Developer" extension, it's in "CSS > Disable Styles > All Styles". Otherwise, use "View"... errr... I'm not sure of the English name (my Firefox is in Bulgarian)... look two menus above "View Source". There should be "None" and "Standard". Click "None". Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2009 Share Posted July 30, 2009 "Page Style" Link to comment Share on other sites More sharing options...
son Posted July 31, 2009 Author Share Posted July 31, 2009 "Page Style"Page Style did the trick:-) Will try to find lots of info on zoomers next, as I am not using jQuery. Just would like to have it on my custom-build website and learn how to do it...Son Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.