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:

<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. :slight_smile:

Chris

Hi there,

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

E.g.

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

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

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?

Morning!

I put together the files I’m using…

Hope this helps…

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

Chris

I just had a look at this and you are missing a bracket:

flipBook({
  css:"css/white.css",
  ...
  zoom:.7
})[B][COLOR="#FF0000"]) <--- here[/COLOR][/B];

Does adding it help at all?

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

Hi,

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

$(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:

GET http://mydomain.com/Problem/Problem/images/book2/page1.jpg 404 (Not Found) three.min.js:203
GET http://mydomain.com/Problem/Problem/images/book2/page2.jpg 404 (Not Found) three.min.js:203
GET http://mydomain.com/Problem/Problem/images/book2/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.

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

Hi,

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

E.g.

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

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

$(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?

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

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:

<!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.

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

No problem at all.
I’m glad it’s working for you now :slight_smile: