[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery Javascript: TopUP

Posted on 2009-12-17
4
Medium Priority
?
1,135 Views
Last Modified: 2012-05-08
Hi,

i'm using the TopUp http://gettopup.com/ Javascript library for my image gallery. I have been following the documents, and looking at the Demo.

I am having a hard time figuring out how the "onclose" event/function works. Everything else works perfectly.

I have the following <a href="photos/1.jpg" toptions="effect = clip, shaded = 1, onclose = function() {alert('Hello world!');} "><img src="thumbnails/1.jpg"/></a>

But i can't get the "onclose" to work, such as in this demo: http://gettopup.com/demo

Thank you so much if you can assist me on this one.

Regards...
0
Comment
Question by:TikkTakk-Aicon
  • 3
4 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 26074043
I've never used that library, but have you tried specifying the name of the function:
<script>
function closer(){
alert('Hello world!');
}
</script>
<a href="photos/1.jpg" toptions="effect = clip, shaded = 1, onclose ='closer' "><img src="thumbnails/1.jpg"/></a>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 26074074
if that still doesn't work, try without apostrophes around the function name:
toptions="effect = clip, shaded = 1, onclose =closer "
0
 

Author Comment

by:TikkTakk-Aicon
ID: 26074107
Hey,

I tried them all, still not working... Any further Suggestions?.

I appreciate your help..
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 26074527
this works:
<html>
  <head>
    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
  </head>
  <body>
    <div id="examples">
      <a href="http://gettopup.com/examples/2.%20Grouped%20links/photos/by-ben-adamson.jpg"><img src="http://gettopup.com/examples/2.%20Grouped%20links/thumbnails/by-ben-adamson.jpg"/></a>
      <a href="http://gettopup.com/examples/2.%20Grouped%20links/photos/2.jpg"><img src="http://gettopup.com/examples/2.%20Grouped%20links/thumbnails/2.jpg"/></a>
      <a href="http://gettopup.com/examples/2.%20Grouped%20links/photos/3.jpg"><img alt="At Sunset" src="http://gettopup.com/examples/2.%20Grouped%20links/thumbnails/3.jpg"/></a>
    </div>
    
   <script type="text/javascript">
      TopUp.addPresets({
        "#examples a": {
          title: "Gallery {alt} ({current} of {total})",
          group: "examples",
          readAltText: 1,
          shaded: 1,
		onclose:function(){alert('hi')}
        }
      });
    </script>

      </body>
</html>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question