Results 1 to 8 of 8

Thread: T Squares Image Zoom

  1. #1
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default T Squares Image Zoom

    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/
    Last edited by Gitominoti; 11-22-2011 at 02:11 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Gitominoti (11-20-2011)

  4. #3
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 11-22-2011 at 02:54 AM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Gitominoti (11-22-2011)

  7. #5
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

  8. #6
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #8
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •