Ok, i was bored at work :D... So far, this works in my testbench. I
get an array of images, initialize the object, bind the methods to
click events and change the images forward and backward.

I hope this will help you:

<img src="/images/assets/add.png" id="frame"/><br/>
<img src="/images/assets/previous.png" id="previousImage"
style="cursor: pointer;" />
<img src="/images/assets/next.png" id="nextImage" style="cursor:
pointer;" />

<script>
var dataSourceUrl = '/images.php';
var imagesUrl = '/images/assets/';
var frameId = 'frame';
var backElementId = 'previousImage';
var fwdElementId = 'nextImage';

var Chooser = Class.create({
        'images': null,
        'imagesUrl': null,
        'frame': null,
        'initialize': function(images, imagesUrl, frameId, backElementId,
fwdElementId) {
                this.images = images;
                this.imagesUrl = imagesUrl;
                this.frame = $(frameId);
                Event.observe($(backElementId), 'click', this.back.bind(this));
                Event.observe($(fwdElementId), 'click', 
this.forward.bind(this));
        },
        'back': function() {
                imageFilename = this.frame.src.match('\/([^\/]+)$');
                imageIndex = this.images.indexOf(imageFilename[1]);
                if (imageIndex == 0) {
                        imageIndex = this.images.length;
                }
                this.frame.src = this.imagesUrl+this.images[imageIndex - 1];
        },
        'forward': function() {
                imageFilename = this.frame.src.match('\/([^\/]+)$');
                imageIndex = this.images.indexOf(imageFilename[1]);
                if (imageIndex + 1 == this.images.length) {
                        imageIndex = -1;
                }
                this.frame.src = this.imagesUrl+this.images[imageIndex + 1];
        }
});

document.observe("dom:loaded", function() {
        new Ajax.Request(dataSourceUrl, {
                'method': "get",
                'onSuccess': function(transport) {
                        json = transport.responseText.evalJSON();
                        new Chooser(json.photos, imagesUrl, frameId, 
backElementId,
fwdElementId);
                },
                'onFailure': function() {
                        console.log('Ajax failure');
                }
        });
})

</script>

On 28 oct, 09:02, Cemo <cemalettin....@gmail.com> wrote:
> Hi all,
>
> I have been using a js library first time, so please forgive me If I
> ask something very fool.
>
> Actually my objective is implementing a reusable component for
>
> 1.  Returning photo links with AJAX
> 2.  And with the help of back and forward button it should change next
> or previous photo link.
>
> But now I have a problem  in my back and forward functions. Since I
> could not reach images variable in back and forward function scope.
>
> (Actually I successfully implemented but I am not sure it is best
> practice )
>
> Ok, How should Implement such a functionality please?
>
>     document.observe("dom:loaded", function() {
>
>             var Chooser = Class.create({
>
>                 initialize: function(images, backElement,
> forwardElement)  {
>                     this.images = images;
>
>                     /////////////
>                     Event.observe(backElement, 'click', this.back);
>                     Event.observe(forwardElement, 'click',
> this.forward);
>                     /////////////
>
>                     console.log('Chooser initialized');
>
>                 },
>                 back: function() {
>                     // Problem is here
>                     console.log(this.images);
>
>                 },
>                 forward: function() {
>                     // Problem is here
>                     console.log(this.images);
>                 }
>             });
>
>             var baseUrl = '/j/advertisementAjaxAction.action';
>
>             myAjax = new Ajax.Request(baseUrl,
>             {
>                 method: "get",
>                 onSuccess : function(transport) {
>                     //console.log(transport.responseText);
>                     data = transport.responseText.evalJSON();
>                     new Chooser(data.photos, $('init_back'), $
> ('init_forward'));
>                 },
>                 onFailure : function() {
>                     //todo set error
>                 }
>             }
>                     );
>         })
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to