1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

What are they using on tis site to do this?

Discussion in 'Web Design' started by BenQs, Jan 27, 2011.

  1. BenQs

    BenQs Regular Member

    Joined:
    Jun 12, 2009
    Messages:
    265
    Likes Received:
    39
    Gender:
    Male
    Anyone know what they're using on this site to expand the pictures?

    Code:
    http://thesisthemes.com/thesis-skins/
     
  2. locknload007

    locknload007 Jr. VIP Jr. VIP Premium Member

    Joined:
    Apr 14, 2010
    Messages:
    475
    Likes Received:
    67
    • Thanks Thanks x 2
  3. m0nster

    m0nster Senior Member

    Joined:
    Oct 20, 2010
    Messages:
    1,044
    Likes Received:
    1,003
    Occupation:
    Offline Marketing
    Location:
    USA
    huh. badass.
     
  4. GreyWolf

    GreyWolf Executive VIP Jr. VIP

    Joined:
    Aug 17, 2009
    Messages:
    1,930
    Likes Received:
    5,387
    Gender:
    Male
    Occupation:
    Artist / Craftsman
    Location:
    sitting at my PC
    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.
    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:
     
    • Thanks Thanks x 1
    Last edited: Jan 27, 2011
  5. locknload007

    locknload007 Jr. VIP Jr. VIP Premium Member

    Joined:
    Apr 14, 2010
    Messages:
    475
    Likes Received:
    67
    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");
    	});			
    });
     
    • Thanks Thanks x 1
  6. GreyWolf

    GreyWolf Executive VIP Jr. VIP

    Joined:
    Aug 17, 2009
    Messages:
    1,930
    Likes Received:
    5,387
    Gender:
    Male
    Occupation:
    Artist / Craftsman
    Location:
    sitting at my PC
    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 would need to copy the skins.js file and the custom.css files to your own folder, the jquery page you can just still call from the googleapis url. Then you just put the url for popup image you want in the anchor title and the thumbnail size image in the img src.

    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: Jan 28, 2011
  7. imdavidcelis

    imdavidcelis Newbie

    Joined:
    Jan 29, 2011
    Messages:
    14
    Likes Received:
    0
    looks nice :O
     
  8. wbdzgnr

    wbdzgnr BANNED BANNED

    Joined:
    Feb 16, 2011
    Messages:
    104
    Likes Received:
    11
    This looks pretty cool i'll try to recreate it for my site :)
     
  9. R0CKY

    R0CKY Newbie

    Joined:
    Mar 13, 2011
    Messages:
    33
    Likes Received:
    10
    There are plenty of easy ways to re-create that effect at dynamicdrive
     
  10. mainreal

    mainreal Newbie

    Joined:
    Feb 3, 2011
    Messages:
    37
    Likes Received:
    0
    am going to give it a trial, if possible recreate it.