CODEWITHSUNDEEP
javascriptjqueryimage-manipulationzooming
Jevgenij Dmitrijev
Jevgenij Dmitrijev

Reputation: 2238

How to create a function which calls a function

I'm using a jquery file which has a image zoom functionality:

http://www.albanx.com/jslibs/axzoomer.js

Everything is working fine. But now i need a feature which is not included with the plugin. On the zoom activating event the default zoom level should be changed.

I've tryied something like this:

imageLoaded:function()
{
    return this.each(function()
    {
        var $this = $(this);
        $this.zoomInOut(1.5);

        // zoomInOut(1.5);
    });
},

But no luck... Since i'm not sure how the functions are working in jQuery, and the zoomInOut is the function inside function as i figured out...

Any help is appreciated.

UPDATE

The function displayed before is integrated into this js file:

http://www.ifmi.lt/public/axzoomer/axzoomer-1.5.js ( Line 382 ).

For those who does not know hot the axzoomer works: you need to provide 2 images one in normal size, another the big size for zoom. Then the initial zoom starting by scaling the small image, when the scale of image is more than 1.2 then the big image is loading.

In my code since i'm using the jquery.reel library also i customized a bit the axzoomer approach. When zoom button is clicked then this function is being called:

function zoomImage ()
{
    var value = Number ( $('#image360').attr('src').split ( '_' )[1].split ( '.' )[0] );

    $('#zoom-content').load( initiateZoom );

    $('#zoom-content').attr ( 'src', 'products/1/' + value + '.jpg' );
    $('#zoom-content').attr ( 'src-big', 'product/1/zoom/' + value + '.jpg' );

    $('#zoom-content').axzoomer({
        'maxZoom':3,
        'opacity':0.5,
        'sensivity':17,
        'showControls':false,
        'zoomIn':'',
        'zoomOut':''
   });
}

After the small image has been loaded, the initiateZoom function is called. The axzoomer ( 'imageLoaded' ); function is reachable from js, it is called when the small image is loaded:

function initiateZoom() 
{
    $('#zoom-content').axzoomer ( 'enable' );
    $('#zoom-content').axzoomer ( 'imageLoaded' );
}

But inside of the imageLoaded ( in the axzoomer.js function starting on line 382 ) i can not reach the zoomInOut function, to zoom the image on initial load.

Upvotes: 1

Views: 412

Answers (1)

Jevgenij Dmitrijev
Jevgenij Dmitrijev

Reputation: 2238

okay, made a different approach to the problem and it was solved in no time.

Here is the sollution.

the file: http://www.ifmi.lt/public/axzoomer/axzoomer-1.5+.js

  1. Added new setting parameter: initialZoom ( line 32 )
  2. Added the checking for the initialZoom parameter ( line 382 )

The new functionality checks for the initialZoom parameter, and if it exists, zooms the image by that amount from the center of the image when the ax-zoomer initializes.

Upvotes: 1

Related Questions