What are they using on tis site to do this?
- Thread starter BenQs
- Start date
locknload007
Power Member
- Apr 14, 2010
- 554
- 86
GreyWolf
Elite Member
- Aug 17, 2009
- 1,862
- 5,847
It's probably something set up by the nextgen-gallery plugins they're using. The NGG plugins on that page are nggallery, shutter, ngg-imagebrowser, and ngg-slideshow. The way it's working has to do with the .preview class that's set in the custom.css file, but there may also be parent classes affecting it from the main.css, layout.css, custom.css, and nggallery.css files.
Here's some very similar css code doing basically the same thing. I made a couple slight modifications to make it easier to understand, but it's functionally the same as on the url I listed in the meta description. You can go to the that url to see it in action, or just save it to your local pc in a folder with some pics named accordingly.
If you're comfortable with code you should be able to incorporate this into your wp pages fairly easily. If not then you'll need to keep looking for a plugin to do it for you. In that case I'd start by looking at the NGG plugins that they're using on the thesisthemes site to see if one of them is doing it.
What this code is doing is setting up a new anchor class "magnify" and changing bold and hover for that class, then you use 2 img src for the anchor, one will be normal and the other uses the <b> tag which hides it 9999px off the page until you do a mouseover. It's pretty slick cause it's really such a simple solution. The code on the thesistheme site is using similar code (except that it actually follows the mouse which is pretty cool), but I didn't feel like looking through all the css files to find everything that's affecting it. The code below positions the magnified image relative to the thumbnail, but it was just a little easier to find.
Hope that helps/ ~Wolf :cool2:
Here's some very similar css code doing basically the same thing. I made a couple slight modifications to make it easier to understand, but it's functionally the same as on the url I listed in the meta description. You can go to the that url to see it in action, or just save it to your local pc in a folder with some pics named accordingly.
If you're comfortable with code you should be able to incorporate this into your wp pages fairly easily. If not then you'll need to keep looking for a plugin to do it for you. In that case I'd start by looking at the NGG plugins that they're using on the thesisthemes site to see if one of them is doing it.
What this code is doing is setting up a new anchor class "magnify" and changing bold and hover for that class, then you use 2 img src for the anchor, one will be normal and the other uses the <b> tag which hides it 9999px off the page until you do a mouseover. It's pretty slick cause it's really such a simple solution. The code on the thesistheme site is using similar code (except that it actually follows the mouse which is pretty cool), but I didn't feel like looking through all the css files to find everything that's affecting it. The code below positions the magnified image relative to the thumbnail, but it was just a little easier to find.
Code:
<head>
<title>Magnify an image</title>
<meta name="description" content="based on CSS code by Stu Nicholls from http://www.cssplay.co.uk/menu/magnify.html" />
<style type="text/css">
a.magnify {display:block; text-decoration:none; background:#fff; border:0; margin:20px 0 0 100px; float:left;}
a.magnify img {display:block; border:0;}
a.magnify:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
a.magnify b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;
-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: opacity 0.6s ease-in-out;
}
a.magnify:hover b {top:-65px; left:110px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0;}
</style>
</head>
<body>
<div><table><tr><td>
<p>For larger images this will work best by using a thumbnail pic and the larger pic.</p>
<a class="magnify" href="whateverlinkyouwant.tld"><img src="thumbnail1.jpg" alt="" /><b><img src="largepic1.jpg" alt="" /></b></a>
<a class="magnify" href="whateverlinkyouwant.tld"><img src="thumbnail2.jpg" alt="" /><b><img src="largepic2.jpg" alt="" /></b></a>
<a class="magnify" href="whateverlinkyouwant.tld"><img src="thumbnail3.jpg" alt="" /><b><img src="largepic3.jpg" alt="" /></b></a>
</td></tr></table></div>
<div><table><tr><td>
<p>But it can also work by just setting the width to create a thumbnail size image from the larger pic.</p>
<a class="magnify" href="whateverlinkyouwant.tld"><img src="largepic1.jpg" alt="" width=100 /><b><img src="largepic1.jpg" alt="" /></b></a>
<a class="magnify" href="whateverlinkyouwant.tld"><img src="largepic2.jpg" alt="" width=100 /><b><img src="largepic2.jpg" alt="" /></b></a>
<a class="magnify" href="whateverlinkyouwant.tld"><img src="largepic3.jpg" alt="" width=100 /><b><img src="largepic3.jpg" alt="" /></b></a>
</td></tr></table></div>
</body>
</html>Hope that helps/ ~Wolf :cool2:
Last edited:
locknload007
Power Member
- Apr 14, 2010
- 554
- 86
a.preview
Code:
/*
ThesisThemes.com Skin Scripts
*/
$(document).ready(function() {
/* CONFIG */
xOffset = 330;
yOffset = -210;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
$("body").append("<p id='preview'><img width='420' height='285' src='"+ this.t +"' alt='Image Preview' /></p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
});GreyWolf
Elite Member
- Aug 17, 2009
- 1,862
- 5,847
There's the functions!!! Thanks ChrarlesNCharge. I found the css definitions for .preview and #preview in the custom.css file, but couldn't find the damned functions. I knew they were there someplace but just wasn't finding them for some reason. LOL
The cool thing about the code in my reply above is that it uses only css, this one uses both css and js. I'll have to go pick it apart later so I can save it in a single html file like I did for the code in my previous reply. Both of them are pretty cool and worth saving for later use.
edit -
Ok, here's the parts you need to make it work
Code:
<html>
<head>
<link rel="stylesheet" href="http://thesisthemes.com/wp-content/themes/-thesis-active/custom/custom.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://thesisthemes.com/wp-content/themes/-thesis-active/custom/js/skins.js"></script>
</head>
<body>
<a
class="preview" title="http://thesisthemes.com/images/newchapter_large_preview.jpg" href="http://thesisthemes.com/premium-skins/new-chapter/"><img
src="http://thesisthemes.com/images/newchapter_small_preview.jpg" alt="New Chapter" width="275px" height="185px" /></a>
</body>
</html>You need to keep everything that's in the skins.js file, but only the #preview and .preview definitions are absolutely required in the css file to make it work. The rest of it includes some formating of the page that you could still use if you want. It does have to be kept in an external stylesheet though, if you try placing it in an onpage head style tag it won't work right.
Last edited:
imdavidcelis
Newbie
- Jan 29, 2011
- 14
- 0
looks nice :O
