SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot chrissyb's Avatar
    Join Date
    Apr 2006
    Location
    Greece
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change the way a function is called from and image to a link

    Hi,

    I'm trying to figure out how to call a function from a a link rather than from an image in a div with the following script:

    Code:
    <script type="text/javascript">
        $(document).ready(function () {
            $("#container").theFunction({
            });
        })
    </script>
    The function is triggered on clicking an image in a div "#container" - I'd like it to be activated from clicking on a link.

    Forgive me for not being more technical. Could anyone advise how.

    Any help greatly appreciated.

    Chris
    There and back to see how far it is...

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi there,

    Just attach a click handler to your link and pass it a reference to your function.

    E.g.
    Code:
    <a href="#" id="myLink">The link</a>
    
    function theFunction(){
      alert("You clicked the link!");
      return false;
    }
    
    $("#myLink").on("click", theFunction);
    The return false; ensures that the link's default action (i.e. navigate to another web page) is cancelled.

  3. #3
    SitePoint Zealot chrissyb's Avatar
    Join Date
    Apr 2006
    Location
    Greece
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much...

    This is what i have arrived at:

    <script type="text/javascript">
    $(document).ready(function () {
    $("#myLink").on("click", flipBook({
    css:"css/white.css",
    pages:[
    {src:"images/book2/page1.jpg", thumb:"images/book2/thumb1.jpg", title:"Cover"},
    {src:"images/book2/page2.jpg", thumb:"images/book2/thumb2.jpg", title:"Page two"},
    {src:"images/book2/page3.jpg", thumb:"images/book2/thumb3.jpg", title:"Page three"},
    ],
    lightBox:true,
    lightboxMargin:0,
    lightboxPadding:0,
    lightboxTransparent:true,
    webgl:true,
    pageFlipDuration:2,
    pageMaterial:'phong',
    zoom:.7
    })
    });
    </script>
    <a href="#" id="myLink">The link</a>

    This is in the body tags, but doesn't seem to work - it's producung an error where the brackets are closed at the end of the block of code.

    Chris
    There and back to see how far it is...

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi Chris,

    Could you post a link to your site so that we can see this in action, or enough code that we can reproduce your issue for ourselves?

  5. #5
    SitePoint Zealot chrissyb's Avatar
    Join Date
    Apr 2006
    Location
    Greece
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Morning!

    I put together the files I'm using...

    Hope this helps...

    https://www.dropbox.com/s/ydgqdsjxad22bv3/Problem.zip

    Chris
    There and back to see how far it is...

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    I just had a look at this and you are missing a bracket:

    Code:
    flipBook({
      css:"css/white.css",
      ...
      zoom:.7
    })) <--- here;
    Does adding it help at all?

  7. #7
    SitePoint Zealot chrissyb's Avatar
    Join Date
    Apr 2006
    Location
    Greece
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    No it's still marking it as an error - 'it' is Dreamweaver, just in case that causes problems - but nevertheless it doesn't work live...

    Strange...

    Chris
    There and back to see how far it is...

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    That's strange, I'm using DW, too and it shouldn't be marking it as an error.
    Just to be sure:

    Code JavaScript:
    $(document).ready(function  ()  {
      $("#myLink").on("click",  flipBook({
        css:"css/white.css",
        pages:[
          {src:"images/book1/page1.jpg",  thumb:"images/book1/thumb1.jpg",  title:"Cover"},
          {src:"images/book1/page2.jpg",  thumb:"images/book1/thumb2.jpg",  title:"Page  two"},
        ],
        lightBox:true,
        lightboxMargin:0,
        lightboxPadding:0,
        lightboxTransparent:true,
        webgl:true,
        pageFlipDuration:2,
        pageMaterial:'phong',
        zoom:.7
      }));
    });

    Apart from that, could you tell me how I can get the original code from your PM to work.
    I tried uploading it (the original code) to a server and accessing it there, but I just get a load of 404 messages from a file called three.js:

    Code:
    GET http://mydomain.com/Problem/Problem/...ook2/page1.jpg 404 (Not Found) three.min.js:203
    GET http://mydomain.com/Problem/Problem/...ook2/page2.jpg 404 (Not Found) three.min.js:203
    GET http://mydomain.com/Problem/Problem/...ook2/page4.jpg 404 (Not Found) three.min.js:203
    It would be a lot easier to debug, if I could see an example of it doing what it should.

  9. #9
    SitePoint Zealot chrissyb's Avatar
    Join Date
    Apr 2006
    Location
    Greece
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apologies - I had the brackets incorrect. there's no error now...

    But it's till not doing what it should....

    I'll send you a link to the working files/folder - if you use example 2, mycode.html is the altered code...

    Thanks so much...

    Chris
    There and back to see how far it is...

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    Now I get what is happening - you need to specify a container element to call the flipBook() method on.

    E.g.

    Code JavaScript:
    $("#myDiv").flipBook({options here});

    So, in your case, you could do this (assumes you have defined a container element with the id of 'container'):

    Code JavaScript:
    $(document).ready(function () {
      function doFlipBook(){
        $("#container").flipBook({
          css:"css/white.css",
          pages:[
            {src:"images/book2/page1.jpg", thumb:"images/book2/thumb1.jpg", title:"Cover"},
            {src:"images/book2/page2.jpg", thumb:"images/book2/thumb2.jpg", title:"Page two"},
            {src:"images/book2/page3.jpg", thumb:"images/book2/thumb3.jpg", title:"Page three"},
            {src:"images/book2/page4.jpg", thumb:"images/book2/thumb4.jpg", title:""},
            {src:"images/book2/page5.jpg", thumb:"images/book2/thumb5.jpg", title:"Page five"},
            {src:"images/book2/page6.jpg", thumb:"images/book2/thumb6.jpg", title:"Page six"},
            {src:"images/book2/page7.jpg", thumb:"images/book2/thumb7.jpg", title:"Page seven"},
            {src:"images/book2/page8.jpg", thumb:"images/book2/thumb8.jpg", title:"Last"}
          ],
          lightBox:true,
          lightboxMargin:0,
          lightboxPadding:0,
          lightboxTransparent:true,
          webgl:true,
          pageFlipDuration:2,
          pageMaterial:'phong',
          zoom:.7
        });
      };
     
      $("#myLink").on("click", function(e){
        e.preventDefault();
        doFlipBook();
      });
    })

    Does that help?

  11. #11
    SitePoint Zealot chrissyb's Avatar
    Join Date
    Apr 2006
    Location
    Greece
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!

    Nothing seems to have changed - when I click the link nothing happens.

    What I've done is added this:

    <div id="container">
    <a href="#" id="myLink">The link</a>
    </div>
    Is this what you meant by having the a link in a container - so the a link has an id too.

    I did wonder if you had to target the link like this #container #myLink

    But this didn't work either.

    Chris
    There and back to see how far it is...

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi there,

    So I finally got to the bottom of this.
    To make this work I had to edit flipbook.min.js.
    I'll send you that altered file via PM. Put it in your project directory (replacing the one which is already there).
    Then, from now on, as long as the "lightbox" option is set to "true", you will be able to initialize the flipbook from a link with the id "startFlipBook".

    Here's a demo.

    Here's the example code:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>FlipBook initialize with link</title>
      </head>
      
      <body style="background: url('images/patterns/ecailles.png');">
        <div id="container" style="margin: 20px;">
          <a href="#" id="startFlipBook">Click here to launch the mighty FlipBook</a>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        <script src="js/three.min.js"></script>
        <script src="js/flipbook.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function () {
            $("#container").flipBook({
              css:"css/white.css",
              pages:[
                  {src:"images/book2/page1.jpg", thumb:"images/book2/thumb1.jpg", title:"Cover"},
                  {src:"images/book2/page2.jpg", thumb:"images/book2/thumb2.jpg", title:"Page two"},
                  {src:"images/book2/page3.jpg", thumb:"images/book2/thumb3.jpg", title:"Page three"},
                  {src:"images/book2/page4.jpg", thumb:"images/book2/thumb4.jpg", title:""},
                  {src:"images/book2/page5.jpg", thumb:"images/book2/thumb5.jpg", title:"Page five"},
                  {src:"images/book2/page6.jpg", thumb:"images/book2/thumb6.jpg", title:"Page six"},
                  {src:"images/book2/page7.jpg", thumb:"images/book2/thumb7.jpg", title:"Page seven"},
                  {src:"images/book2/page8.jpg", thumb:"images/book2/thumb8.jpg", title:"Last"}
              ],
              lightBox:true,
              lightboxMargin:0,
              lightboxPadding:0,
              lightboxTransparent:true,
              webgl:true,
              pageFlipDuration:2,
              pageMaterial:'phong',
              zoom:.7
            });
          })
        </script>
      </body>
    </html>
    Sorry that we had to hack the plugin to make it do what you want.
    If we weren't dealing with such a huge lump of minified JavaScript, we could have done this much more elegantly.

  13. #13
    SitePoint Zealot chrissyb's Avatar
    Join Date
    Apr 2006
    Location
    Greece
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!

    Thanks so much it works. I had no idea it would need so much tweaking, so apologies for taking up so much of your time with it!

    Many many thanks...

    Chris
    There and back to see how far it is...

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    No problem at all.
    I'm glad it's working for you now


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
  •