T Squares Image Zoom

**Gitominoti** · 11-20-2011, 03:34 PM

I am new to coding in Javascript/HTML, so I need some help. There is a script called T Squares Image Zoom, and I am having trouble getting it working. This is all I got right now

Code:

<html>
    <header>
        <script type="text/javascript" src="js/tzoom.js"></script>
        <script type="text/javascript" src="js/tzoom.min.js"></script>
        <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
        
        <link rel="stylesheet" href="css/tzoom.css" type="text/css" media="screen" />
    </header>
    
    <body>   
         <div id="my-zoom" style="width:600px; height:595px;">
            <img src="images/map.jpg" rel="my-zoom" width="600" height="595"/>
         </div>
    </body>
</html>

And now I'm lost completely (again, I'm new to this). If someone can lead me in the right direction, that would be great. Thanks

http://tsquares.net/

**jscheuer1** · 11-20-2011, 06:19 PM

That's probably because they didn't include a bare bones demo in the distribution zip file. And the instructions on usage are fragmented at best.

Here's an archive with a working bare bones demo that has room to grow for everything except the easing options*:

Attachment 4219

You will notice in the demo.htm:

Code:

<script type="text/javascript">
jQuery(function($){
	$('#my-zoom').tzoom({
		image: $("<img />").attr("src", "http://www.google.com/intl/en_com/images/srpr/logo3w.png"),
		decreaseBtn: "#my-decrease-btn",
		increaseBtn: "#my-increase-btn"
	});
});
</script>

Those highlighted are the tzoom options used. There are tons of options - see the:

http://tsquares.net/index.html

page, click on the options tab, and click on individual options for more of an explanation of each one.

*For easing options you would need to add the easing script:

http://gsgd.co.uk/sandbox/jquery/easing/

but the default easing (swing) is sufficient for everything you might want to do, at least at first.

**Gitominoti** · 11-21-2011, 09:11 PM

Okay, thanks for the help. I managed to get it working, however I have run into another problem. I'm trying to get it so that when you click on a link or a button, it opens up an inline popup (like Lightbox etc.). I found that Lightbox won't work at all with this script because of the way it was designed (I think. I could be wrong). I did find one here that looks like it could work. I got the popup to work, but the now the picture with the zoom doesn't work. This is what I got in my <body>

Code:

<body>
        <center><div id="button"><input type="submit" value="Press Me" /></div></center>
        
        <div id="popupContact">
            <a id="popupContactClose">x</a>
            
            <div id="one">
                <div id="zoom">
                    
                </div>                
            </div>
       </div>
</body>

It seems to be a bit sloppy because of all the empty <div> tags, but maybe that is how it is supposed to be. Anyways, without the popupContact and popupContactClose tags, the picture shows with the zoom effect. With them, however, it doesn't work. If you or someone else could tell me what I did wrong, that would be great.

Thanks

**jscheuer1** · 11-22-2011, 01:09 AM

That script "How to create a stunning and smooth popup using jQuery" is a new one on me and I thought I'd seen all the box type scripts out there. Their demo is impressive, but I'm hesitant to mess with it because they're using an outdated version of jQuery for it. I like Fancybox (also jQuery based) for this.

Any way you slice it though, to get this to work with a box as inline content (putting content that's already on the page into the popup box) is complicated. You could have it (the image zoom thing) on a separate page and fetch it into an iframe in the box. That would be preferable if - say you wanted it to be modular, be able to have several links or buttons on a page that would call up different zoom images. But you can use Fancybox to grab the tzoom content right from the same page:

Attachment 4221

**Gitominoti** · 11-22-2011, 03:09 AM

Wow, you are a god. Thank you very much!

**Gitominoti** · 11-23-2011, 08:54 PM

One last question, however. I know Fancybox can automatically resize the image so that it fits inside the window. The demo you made gives it actual dimensions to both the image and the frame. According to the Fancybox site, the autoScale option should be enabled by default. How can I automatically resize the image in Fancybox? If you could explain it without providing a demo, that would be great. I want to see if I can add it in myself

**jscheuer1** · 11-24-2011, 02:08 AM

I'm not sure I understand the question. Um sure, a default Fancybox will resize an image it presents to fit within the browser window if it's too large for that window. But the user can't interact with the image after that to resize it.

Is that what you're after?

If so, forget about tzoom and all its scripts and files and just follow the default installation instructions* for Fancybox, which are much better than those for tzoom. If that's a problem, I can give you some example code without providing a demo.

If not, please be more specific.

*See:

http://fancybox.net/howto

**Gitominoti** · 11-24-2011, 10:41 PM

I mean, in the demo you posted, you can change the image/frame size with these lines

Code:

content: '<div id="fbreceptor" style="width: 600px; height: 600px;"></div>',

Code:

            #my-zoom {
                top: 0 !important;
                width: 600px;
                height: 600px;
                margin: 0 auto;
            }

How can I get this to automatically determine the initial size of the image based on the window? Right now with that code it makes it 600x600. I've tried changing the values to auto, or into a percentage, but that doesn't work. Fancybox should change it automatically, but for some reason it doesn't want to (my pictures are much larger than the window). autoResize should be true by default, so that isn't the problem.

I still want to be able to zoom in on them with the T Zoom. Or is this not possible? If not, that's fine too

Thread: T Squares Image Zoom

Thread Tools

Search Thread

T Squares Image Zoom

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions