CODEWITHSUNDEEP
javascriptjqueryhtmlraphael
supersize
supersize

Reputation: 14793

use raphael animations on images

following situation:

i have a raphael.js circle and when im clicking its popping out big. that easing effects makes it look like a charm

circle = paper.circle(1000, 500, 25);
circle.click(function() {
       this.animate({ r: 500 }, 1000,'super_elastic'); });

i would like to use this on an image. something like

<body>
  <img src="bla.jpg" id="image"/>
</body>

 <script>
   var image_1 = $('#image')
   image_1.click(function() {
       this.animate({ r: 500 }, 1000,'super_elastic'); });
 </script>

is this possible?

i am new to raphael, that means i dont really know if it only works with the canvas!

thanks for your help!

Upvotes: 0

Views: 420

Answers (2)

Ayan Pal
Ayan Pal

Reputation: 99

please refer to this sample code. 1st one using Raphael. and next one using jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitieal//EN">
<html>
    <head>
        <title>Test Raphael</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type ="text/javascript" src="jquery.min.js" ></script>
        <script type ="text/javascript" src="raphael.js" ></script>
    </head>
    <body>
        <div id="raphael" style=""></div>
        <script>
            var paper = Raphael("raphael", 500, 500),
                image = paper.image('bla.jpg', 0, 0, 100, 100);
            image.click(function() {
                this.animate({width: 500, height: 500}, 1000);
            });

        </script>
        <div style="position:absolute; left:600px; top: 0px">
            <img src="bla.jpg" id="image" width="100" height="100"/>
        </div>
        <script>
            var image_1 = $('#image')
            image_1.click(function() {
                $(this).animate({
                    width: 500,
                    height: 500
                }, 1000, 'linear');
            });
        </script>
    </body>
</html>

Upvotes: 2

Michael Sanchez
Michael Sanchez

Reputation: 1265

I don't think you can use the raphael function without the image being created in the canvas using

 Paper.image(src, x, y, w, h);

How about JQuery Fancybox?

Sorry If I misunderstood your need.

Upvotes: 0

Related Questions