Zooming example. Don't want to use JS to load larger images

[closdesign]

We are using the Magazine example which works great. But we want to load the pages in the HTML not through Javascript, and have the zoom work to switch out the large images like the example shows but not use Javascript to load the large images. I know we can load the small images using the (div) wrapped around our (img) tags within the .magazine div and the magazine-viewport. But what about the zoom? We want to implement this in our CMS (Umbraco) which dynamically generates the path to the images in the database. So our "-large" images will not have an absolute path for the folder for the large images like in the magazine.js example of "/pages" + page + '-large.jpg'. Is there another way to do this where the large images reside in the HTML too but don't show until zoomed?

I found the function in the magazine.js. How could we modify this to use our large images that are matched in the HTML to the pages that get zoomed. Would it be a (data) or (rel) attribute on the images?

function loadLargePage(page, pageElement) {

    var img = $('<img />');

    img.load(function() {

        var prevImg = pageElement.find('img');
        $(this).css({width: '100%', height: '100%'});
        $(this).appendTo(pageElement);
        prevImg.remove();

    });

    // Loadnew page

    img.attr('src', 'pages/' +  page + '-large.jpg');
}

Thanks in advance.

[postonoh]

http://www.agflipbooks.com/books/book.aspx?bookid=96. open source and look at the code. Are you looking for code similar to this.

[closdesign]

@postonoh, Not really what I had in mind. Turn.js already accomodates zooming. I am just wondering, using the Turn.js code set whether there is a different way to zoom the images instead of putting an absolute path the the -large files in a folder. agflipbooks looks like a nice tool, but seems a bit clunky. It has a lot of nice functionality that could be loaded into Turn.js but the thing we like about Turn.js is the speed, versatility and the elegance. Although I do see that there was a PDFConverted stuff. That is cool too. With the highlights and hotspot. But we are sticking with Turn.js. Thanks for the link though.

[blasten]

@closdesign You could move the image that contains the large page to the flipbook and remove the small image. Let's say that you have the large images within a hidden element and they are somehow linked to every page, for example using an id, so that your large images could have an id like: page-large-1.

function loadLargePage(page, pageElement) {

  pageElement.find('img').remove();

  $('page-large-'+page).
    css({width: '100%', height: '100%'}).
    appendTo(pageElement);

}

@postonoh The PDF conversion and cool stuff will be offered as a service.

[closdesign]

@blasten, That was actually a solution I was looking at using. We actually do that for another jQuery plugin we use and ended up modifying or extending.

I just had a quick question about the .zoom. So I took the basic example that came with the Turn.js 4.0.9 download. I added the zoom.js file call and used the .zoom to zoom my magazine element. But when I tried to do a jQuery .click and added the .zoom() to that the book disappeared. What does .zoom() really do? I followed the documentation and though starting with the very basic example would work since the pages are in the HTML. I did something like this within the function loadApp() after the .turn() stuff

$(".flipbook").click(function(){
        $(".flipbook-viewport").zoom({
        flipbook: $(".flipbook"),
        max:3
        });
    });

This did not seem to work. when I clicked on the .flipbook the whole element disappeared. Acted more like a .hide(). I am not getting any JS errors in Firebug. I was going to try to use this instead of getting the ID of the large elements and switching them out and just load the large pages, have them resized in the flipbook and then when the .zoom() method was called then the pages would already the Flipbook. Am I doing something wrong?? Thanks in advance.

This is the full JS I have in the bottom of the page. And this is all.

function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Hardware acceleration

            acceleration: !isChrome(),

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });
    $(".flipbook").click(function(){
        $(".flipbook-viewport").zoom({
        flipbook: $(".flipbook"),
        max:3
        });
    });
}

// Load the HTML4 version if there's not CSS transform

yepnope({
    test : Modernizr.csstransforms,
    yep: ['../../lib/turn.min.js'],
    nope: ['../../lib/turn.html4.min.js'],
    both: ['../../lib/zoom.js', 'js/basic.js', 'css/basic.css'],
    complete: loadApp
});

[closdesign]

@blasten We got our version working. The jQuery code you posted was a great start and we took it from there. We are actually just using 1 image for the large, small and thumb images by just pointing the jQuery to the 'page' element and putting the pages directly in the HTML vs pulling them from the folder. Works quite nicely.

We only have one issue now. The thumbnails don't show up when the #canvas loads for some reason. When we do the zoom and zoom out the show up but on the initial load they don't. I see in the jQuery that on the .zoom in and zoom out that the thumbs show and hide but I can't quite figure out where they load initially. It only happened when we told the thumbs to load from the larger images. or the 'page' element.

If I reload the page the thumbnails show up properly. Not sure if this is a bug with jQuery and loading the CSS or what. It actually loads behind the magazine. Looks like the Thumbnails div on the initial load does not keep it's height. It actually blows up to about 518 px. Then when I refresh the page it loads the correct height. Not sure what is going on. Will keep plugging away.

Any ideas?

Thanks in advance.

[closdesign]

I am tying this to another issue I have out on the issues. Since we have the <div> s in the HTML. How do we get the regions to work with the .flipbook div having

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div style="background-image:url(pages/1.jpg)"></div>
            <div style="background-image:url(pages/2.jpg)"></div>
            <div style="background-image:url(pages/3.jpg)"></div>
            <div style="background-image:url(pages/4.jpg)"></div>
            <div style="background-image:url(pages/5.jpg)"></div>
            <div style="background-image:url(pages/6.jpg)"></div>
            <div style="background-image:url(pages/7.jpg)"></div>
            <div style="background-image:url(pages/8.jpg)"></div>
            <div style="background-image:url(pages/9.jpg)"></div>
            <div style="background-image:url(pages/10.jpg)"></div>
            <div style="background-image:url(pages/11.jpg)"></div>
            <div style="background-image:url(pages/12.jpg)"></div>

        </div>
    </div>
</div>

In the Magazine example the regions are working, but those are pulling the images through Javascript and not putting the elements directly in the HTML. Any suggestions?

Thanks in advance.

[lleworc]

I am having the exact same problem as you were with zooming the basic flipbook in Turn.js 4.0.9 and was hoping you could help me with the solution that you were able to come up with. I have spent many hours trying to figure this out without using two different sized images like the magazine example uses. I need the basic flipbook to zoom in and out while only using one large image as the source. Any help would be greatly appreciated thanks.

[blasten]

@lleworc Find this section in the index.html

resize: function(event, scale, page, pageElement) {
  if (scale==1)
    loadSmallPage(page, pageElement);
  else
    loadLargePage(page, pageElement);
},

and remove it.

[yasirhaleem]

@blasten @closdesign @postonoh @lleworc i have same issue i'm unable to make zoom working on basic sample ... blow code shows blank page

function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            // Width

            width:922,

            // Height

            height:600,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });
    $(".flipbook-viewport").zoom({
        flipbook: $(".flipbook"),
        max:3
        });
}

// Load the HTML4 version if there's not CSS transform

yepnope({
    test : Modernizr.csstransforms,
    yep: ['../../lib/turn.js'],
    nope: ['../../lib/turn.html4.min.js'],
    both: ['../../lib/zoom.min.js','css/basic.css'],
    complete: loadApp
});

and html

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div style="background-image:url(pages/1.jpg)"></div>
            <div style="background-image:url(pages/2.jpg)"></div>
            <div style="background-image:url(pages/3.jpg)"></div>
            <div style="background-image:url(pages/4.jpg)"></div>
            <div style="background-image:url(pages/5.jpg)"></div>
            <div style="background-image:url(pages/6.jpg)"></div>
            <div style="background-image:url(pages/7.jpg)"></div>
            <div style="background-image:url(pages/8.jpg)"></div>
            <div style="background-image:url(pages/9.jpg)"></div>
            <div style="background-image:url(pages/10.jpg)"></div>
            <div style="background-image:url(pages/11.jpg)"></div>
            <div style="background-image:url(pages/12.jpg)"></div>
        </div>
    </div>
</div>

Any suggestions? Thanks in Advance.

[b8ka]

Guys, how could I add a var to set a source for images?

[IkramShams]

I am using the Magazine example which works good. But I want to load the pages dynamically using asp.net and sql server not through Javascript, How i will load small image and large dynamically using asp.net,C# and SQL Server. Thanks in advance.

[lleworc]

I am sorry but I do not use asp.net so I cannot help you. Good luck

On February 24, 2015 6:56:11 AM IkramShams [email protected] wrote:

I am using the Magazine example which works good. But I want to load the pages dynamically using asp.net and sql server not through Javascript, How i will load small image and large dynamically using asp.net,C# and SQL Server. Thanks in advance.

---

Reply to this email directly or view it on GitHub: https://github.com/blasten/turn.js/issues/153#issuecomment-75743793

[IkramShams]

How can we load small and large pages through html not using java script in magazine example of turn.js.com.

[closdesign]

@IkramShams if you want to do it through ASP.net you will need to have the images loaded to the pages folder before the client (browser) hits the site. The images need to exist on the server in the folder before the Javascript will get it. If you want to load the small and large images through the HTML and not Javascript in the Magazine example, you are going to have to dig into the Magazine.js or at the bottom of the index.html of the Magazine example and change that. I would suggest looking at one of the other examples in the download that pulls the pages into the HTML and renders the book/magazine and see how the Javascript is doing it. You may have to write some custom Javascript for your purpose. The Turn.JS is actually not a one size fits all solution. He provides the base for the page turning functionality, in his examples, he provides....examples, of what the possibilities are using the Turn.JS as a base.

[IkramShams]

Thanks closdesign for your quick response. I have already uploaded my images on server in folders and the images name are already saved in the database I just want to show the images on the page same as magazine example.Please suggest me what the changes i will have to do in Magazine.js or in index.html

[closdesign]

@IkramShams, We use the Magazine for our monthly Magazine. Granted I have to hardcode some of it, but I got to a point where the authors of the Magazine give the the images for the pages and I just resize them.
The key you have to keep in mind are 3 sizes of images ALL of them live in the 'pages' folder. The large, zoomed images are named something like 1-large.jpg, 2-large.jpg, and so on. The medium images are 1.jpg, 2.jpg and so on. The small thumbnail images are 1-thumb.jpg, 2-thumb.jpg, and so on.

In the Magazine example, I think the thumbnails are actually in the HTML. I think that is where ours is and the medium and large images get pull from by the Javascript into the page. Assuming they are on the server.

In the Magazine.js, if you want to edit any of this you will see a function on line 25 called 'loadPage'. This is where the Javascript is pulling the location of the images for the Javascript to dynamically put into the page. You will see it dynamically creates an image element, and loads the 'src' attribute from the folder '/pages/'. You will also see a few other calls on line 167 AND 187 where 2 more functions create the large zoomed page elements with the suffix "-large" on it. On line 187 it says loadSmallpage, but I think this is just the basic page element. The thumbs are suffixed with "-thumb",and those are not in the Javascript, those are directly on the page in the HTML, But you will see on line 264 that looks for the container element for the Thumbnails and sets its offset. All of your other base configuration to call the TurnJS stuff after that is in the index.html of the Magazine sample.

I don't quite know your set up, but if the images are all in your images folder on your server and the TurnJS index page lives on the server in the SAME project that the images folder is, then you should not really have an issue. As long as your images are there, it should run and load the images.

We don't have the same set up as you, but you can view the source in the browser of one of our magazines. http://apps.dmns.org/Catalyst/February-March2015/#page/1

[closdesign]

@IkramShams, I don't know that a database is going to work with this unless you have some sort of service that sells where the pages folder live. A database might be a bit of overkill. TurnJS is totally client side. Any serverside stuff would have to be served up through a service or using NodeJS because you can't or shouldn't access the DB from Javascript.

I guess what I should be asking is, Why are you wanting to use .Net to try to serve pages?
Do you already have the .Net written to load the images in the HTML?
Are you dynamically writing, loading and saving images in the '/pages/' folder?

[IkramShams]

Thanks for your quick response. I have uploaded about 60000(sixty thousand) images on my company local server of different name folders(not pages folder). I have more than 100 folders in which are stored. I have to show the only related images of that category and subcategory folders on which the user clicks. so, i want to load the images dynamically. I have already converted the Basic example into dynamic and also the thumbnail images of Magazine example into dynamic. In these cases, the images are loading from HTML page. so i don't have any problem to make them dynamic but in the case of small and large image of Magazine Example, the images are loading from javascript. so, i have problem to make them dynamic. Can we load the small and large image of Magazine Example from HTML page same as Basic Example? If not, then please provide me some examples same as Magazine Example in which we are showing the images and thumbnails. I want that images and thumbnails should be loaded from HTML page not from javascript as it is in Basic Example. Your above given example http://apps.dmns.org/Catalyst/February-March2015/#page/1 is good but in this example there is no thumbnail. I need also thumbnail below of image. Please suggest me. Thanks in advance.

[closdesign]

Ok. I see what you are trying to do now. Since you go the Basic example done, then the Magazine example should be fairly easy. At the moment I don't have time to look at that to put the pages in as HTML, but I will take a look at it. That actually may help me on a project dynamically creating pages in the HTML too. I will have to look at this. Might take a few days, but sound like a great project to get working. Also, the Thumbnails are on the page, the browser window just has to be taller for them to show. I customized the base width and height of the magazine for our needs. So if the browser windows is smaller than a certain size it hides the thumbs.

[IkramShams]

Thanks for your kind support.

[brnaa2005]

@blasten [email protected] Can you look at your mail?

[brnaa2005]

@closdesign Can you give me your mail address