modifica web gallery javascript/ajax

[mr]

Buon giorno,
in cerca di una bella galleria fotografica da mettere sul mio sito, mi sono imbattuto in un tutorial per la realizzazione di una gallery come questa...
dato che come vedete è spettacolare ho deciso di utilizzarla per il mio sito...La gallery è scritta completamente in javascript, sfruttando anche le librerie di jquery, e i dati delle fotografie sono memorizzate in un file con estensione .json...
Io avrei necessità di fare alcune modifiche, ad esempio vorrei dare il compito di memorizzare i dati ad un database mysql (o magari anche a un file xml, non so quale mi convenga di più), ma purtroppo di javascript non me ne intendo molto, conosco giusto le basi...
questo per avere la possibilità di accedere ai dati e modificarli mediante php (da quanto ho capito php gestisce i file json solo dalla 5 in su)...in ogni caso quello che mi interessa alla fine è di poter aggiungere un pannello di gestione che dia la possibilità di aggiungere foto e di gestirle

Vi metto qui sotto il codice dei file

javascript.js

var album = 0; //The currently selected album
var current = 0; //The currently selected image
var view; //The currently selected view
var data = []; //The data for the currently selected album
var title = ""; //The title of the currently selected album
var sprite = ""; //The sprite of the currently selected album
var gridView, mosaicView; //the views, defined later

$(document).ready(function() {
    view = gridView; //this referrs to a function that we havn't created yet
    albumView(); //render the album view
   
    //set up the jQuery UI slider for later use by the grid view
    $("#slider").slider({
    	value: 75,
    	max: 150,
    	min: 50,
    	slide: function(event, ui) {
    	    $('#content').css('font-size',ui.value+"px");
    	}
    });
	
    //setup the buttons for switching views
    $("#grid").click(function() {
        $("#views a.selected").removeClass("selected");
        $(this).addClass("selected");
        gridView();
    });
    
    $("#mosaic").click(function() {
        $("#views a.selected").removeClass("selected");
        $(this).addClass("selected");
        mosaicView();
    });
    
    $("#slideshow").click(function() {
	    slideshowView();
	});
    
});

function albumView() {
    //remove everything from the content area that might have been there from other views,
    //as well as the back button (used later) 
    $("#content *").remove();
    $(".button").remove();
    
    //add the album_view class to the content view, and extent it to the bottom of the window
    //also, hide the footer, and set the title of the gallery (in the data file)
    $("#content").attr("class", "").addClass("album_view"); 
    $("#content").css({ bottom: "0px", top: "57px" }); 
    $("#controls").hide();
    $("h1").removeClass("view").html(gallery);
    current = 0; 
    
    $("<h2>Albums</h2>").appendTo("#content"); //add the title of the view
    $.each(albums, function(i) {
    	//create the album, and register the click handler
        var item = $('<div class="item">').click(function() {
            album = i; //set the current album
            data = albums[i].photos; 
            title = albums[i].title;
            sprite = albums[i].sprite;
            view(); //go to current view
        });
        
        //create the skimmer, and set the background image to the sprite for the album (in the data file)
        //then register the mousemove event
        $('<div class="skimmer">').css("background", "url("+this.sprite+")").mousemove(function(e) {
            var x = e.pageX; 
            var w = 160 / albums[i].photos.length; 
            var offset = $(this).offset().left; 
            var image = Math.floor((x - offset) / w);
            $(this).css("background-position", "0px " + (-160 * image) + "px");
        }).mouseout(function() {
        	//when we mouseout, set the background position back to 0
            $(this).css("background-position", "0px 0px"); 
        }).appendTo(item);
        
        //create the album title and the number of photos label
        $('<strong/>').html(this.title).appendTo(item);
        $('<span/>').html(this.photos.length + (this.photos.length > 1 ? " Photos" : " Photo")).appendTo(item);
        
        item.appendTo("#content"); //add the item to the content area
    });
};

function gridView() {
    //remove everything from the content area that might have been there from other views,
    //add the grid_view class to the content view, and set up the title bar
    $("#content *").remove();
    $("#content").attr("class", "").addClass("grid_view");   
    $("h1").addClass("view").html(title).show(); 
    $(".button").remove();  
    
    //set up the footer view, and the content area
    $("#controls").show();
    $("#controls #slider").show();
    $("#content").css({ bottom: "40px", top: "57px" });
    
    view = gridView; //set the current view
    
    //add the back button
    $('<div class="button">').html(gallery).click(function() {
        albumView(); //go back to the current view
    }).appendTo("body");
    
    //add the items in the album to the grid, and set the size of the image in ems.
    $.each(data, function(i) {
        var item = $('<div class="grid_item">').click(function() {
            largeView(this, i);
        });
        $('<img/>').attr("src", this.src)
                   .css("width", this.width / 100 + "em")
                   .css("height", this.height / 100 + "em")
                   .appendTo(item);
        $("<strong/>").html(this.title).appendTo(item);
        item.appendTo("#content");
    });
};

function mosaicView() {
    //remove everything from the content area that might have been there from other views,
    //add the grid_view class to the content view, and set up the title bar
    $("#content *").remove();
    $("#content").attr("class", "").addClass("mosaic_view");
    $("h1").addClass("view").html(title).show();
    $(".button").remove();
    
    //set up the footer view, and the content area
    $("#controls #slider").hide();
    $("#controls").show();
    $("#content").css({ bottom: "40px", top: "57px" });
    
    view = mosaicView; //set the current view
    
    //add the back button
    $('<div class="button">').html(gallery).click(function() {
        albumView(); //go back to the current view
    }).appendTo("body");
    
    //add the large view with title
    var detail = $('<div id="mosaic_detail">').click(function(i) {
        largeView(this, current);
    });
    $("<img/>").attr("src", data[current].src).appendTo(detail);
    $("<strong/>").html(data[current].title).appendTo(detail);
    detail.appendTo("#content");
    
    //add the thubnail grid, with a click handler to animate the image change
    var grid = $('<div id="mosaic_grid">');
    $.each(data, function(i) {
        $('<div class="mosaic_item">')
            .css({
                backgroundPosition: "0px " + (-160 * i) + "px",
                backgroundImage: "url(" + sprite + ")"
            })
            .data("num", i)
            .click(function() {
                var num = $(this).data("num");
                current = num;
                $(".mosaic_item.selected").removeClass("selected");
                $(this).addClass("selected");
                
                $("#mosaic_detail").animate({ opacity: 0 }, "fast", function() {
                    $("#mosaic_detail img").attr("src", data[num].src);
                    $("#mosaic_detail strong").html(data[num].title);
                    $(this).animate({ opacity: 1 }, "fast");
                });    
            }).appendTo(grid);
    });
        
    grid.appendTo("#content");
    
    //select the current item in the thumbnail grid view
    $(".mosaic_item:nth-child("+ (current + 1) +")").addClass("selected");
};

function largeView(photo, i) {
    current = i;
    var item = data[i];
    
    var hovered = false;
    
    $("h1").hide();
    $(".button").remove();
    $("#content").attr("class", "").addClass("large_view");
    $("#controls").hide();
    $("#content").css({ bottom: "0px", top: "0px" });
    $("#content *").remove();
    
    $('<div class="button">Back to Album</div>').click(function() {
        view(); //go back to the current view
    }).appendTo("#content");
    
    var large = $('<div id="main">');
    $("<img/>").attr("src", item.src).appendTo(large);
    $("<strong/>").html(item.title).appendTo(large);
    large.appendTo("#content");
    
    var wrapper = $('<div id="hover_view_wrapper">');
    var hover = $('<div id="hover_view">').hover(function() {
        hovered = true;
    }, function() {
        hovered = false;
    });
    
    $('<div id="previous" title="Previous">').click(function() {
        if(!data[current-1]) return;
        
        $(".large_view #hover_view #next").removeClass("disabled");
        if(!data[current-2]) $(this).addClass("disabled");
        
        current--;
        $(".large_view #main").animate({ opacity: 0 }, "fast", function() {
            $(".large_view img").attr("src", data[current].src);
            $(".large_view strong").html(data[current].title);
            $(this).animate({ opacity: 1 }, "fast");
        });    
    }).appendTo(hover);
    
    $('<div id="next" title="Next">').click(function() {
        if(!data[current+1]) return;
       
        $(".large_view #hover_view #previous").removeClass("disabled");
        if(!data[current+2]) $(this).addClass("disabled");
        
        current++;
        $(".large_view #main").animate({ opacity: 0 }, "fast", function() {
            $(".large_view img").attr("src", data[current].src);
            $(".large_view strong").html(data[current].title);
            $(this).animate({ opacity: 1 }, "fast");
        });    
    }).appendTo(hover);
    
    wrapper.append(hover).appendTo("#content");
    
    if(current == 0) {
        $(".large_view #hover_view #previous").addClass("disabled");
    }    
    else if(current == data.length-1) {
        $(".large_view #hover_view #next").addClass("disabled");
    }
    
    var timer;
    var showing = false;
    
    $("#content").mousemove(function(event) {
        if(!showing) {
            showing = true;
            $(".large_view #hover_view").stop().animate({ opacity: 1 });
        }
        
        clearTimeout(timer);
        timer = setTimeout(function() {
            if(hovered) return;
            showing = false;
            $(".large_view #hover_view").stop().animate({ opacity: 0 });
        }, 2000);
    });
};

function slideshowView() {
    window.open("slideshow.html#"+album+"/"+current,
                "slideshow",
            "menubar=no,toolbar=no,location=no,fullscreen=yes,resizable=no,scrollbars=no,status=no,left=0,top=0,width="+screen.width+",height="+screen.height);
};

slideshow.js

$(document).ready(function() {
    //get the selected album and photo from the hash
    var hash = window.location.hash.match(/#(\d+)\/(\d+)/);
    var album = parseInt(hash[1]);
    var current = parseInt(hash[2]);
    
    //get the photos and title from the selected album, and set the title of the window
    var data = albums[album].photos;
    var title = albums[album].title;
    document.title = gallery + " - " 
                   + title + " - " 
                   + data[current].title + " (" + (current + 1) + " of " + data.length + ")";
    
    var fade = 500; //the duration of the slideshow crossfade
    
    //create the two images used for crossfading
    var img1 = $('<img id="img1">')
             .attr("src", data[current].src)
             .appendTo("#slideshow")
             .fadeIn(fade)
             .wrap("<div class='img_wrapper'></div>");
    var img2 = $('<img id="img2">')
             .attr("src", data[current+1].src)
             .appendTo("#slideshow")
             .wrap("<div class='img_wrapper'></div>");
    
    //define the next and previous function used for changing the displayed image
    var next = function() {
        current++;
        if(current >= data.length) current = 0;
        
        var next = (current+1 >= data.length ? 0 : current+1);
        document.title = gallery + " - " + title + " - " + data[current].title + " (" + (current + 1) + " of " + data.length + ")";
        
        $("#slideshow img:visible").stop().fadeOut(fade, function() {
            $(this).attr("src", data[next].src);
        });
        $("#slideshow img:hidden").attr("src", data[current].src).stop().fadeIn(fade);
        
    };
    
    var previous = function() {
        current--;
        if(current < 0) current = data.length-1;
        
        var previous = (current < 0 ? data.length-1 : current);
        document.title = gallery + " - " 
                       + title + " - " 
                       + data[current].title + " (" + (current + 1) + " of " + data.length + ")";
        
        $("#slideshow img:visible").stop().fadeOut(fade, function() {
            $(this).attr("src", data[current].src);
        });
        $("#slideshow img:hidden").attr("src", data[previous].src).stop().fadeIn(fade);
    };
    
    //set the timer to change images every 4 seconds
    var interval = setInterval(next, 4000);
    
    var playing = true; //is the slideshow currently playing?
    var hovered = false; //are we hovered over the controls?
    
    var wrapper = $('<div id="hover_view_wrapper">');
    var hover = $('<div id="hover_view">').hover(function() {
        hovered = true;
    }, function() {
        hovered = false;
    });
    
    //create the previous, next and play/pause buttons
    $('<div id="previous" title="Previous">').click(function() {
        previous();
        if(current < 0) current = data.length-1;
        if(playing) {
            clearInterval(interval);
            interval = setInterval(next, 4000);
        }    
    }).appendTo(hover);
    
    $('<div id="playpause" title="Pause">').addClass("pause").click(function() {
        if(playing) {
            clearInterval(interval);
            $(this).removeClass("pause").addClass("play");
            $(this).attr("title", "Play");
            playing = false;
        }
        else {
            interval = setInterval(next, 4000);
            $(this).removeClass("play").addClass("pause");
            $(this).attr("title", "Pause");
            playing = true;
        }
    }).appendTo(hover);
    
    $('<div id="next" title="Next">').click(function() {
        next();
        if(playing) {
            clearInterval(interval);
            interval = setInterval(next, 4000);
        }
    }).appendTo(hover);
    
    wrapper.append(hover).appendTo("body");
    
    var timer;
    var showing = false;
    
    $("body").mousemove(function(event) {
        if(!showing) {
            showing = true;
            $("#hover_view").stop().animate({ opacity: 1 });
            $("body").css("cursor", "default");
        }
        
        clearTimeout(timer);
        timer = setTimeout(function() {
            if(hovered) return;
            showing = false;
            $("#hover_view").stop().animate({ opacity: 0 });
            $("body").css("cursor", "none");
        }, 2000);
    }).mousemove();
    
});

data.json

var gallery = "My Greater Gallery";
var albums = [
    {
        title: "Lake Tahoe",
        sprite: "http://gallery.me.com/emily_parker/100579/scrubSprite.jpg?ver=121513594900013",
        photos: [
            {
                title: "On the river",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-201/web.jpg?ver=12151358310001",
                width: 260,
                height: 192
            },
            {
                title: "Mike and Nancy",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-202/web.jpg?ver=12151358290001",
                width: 260,
                height: 192
            },
            {
                title: "Carrying the canoe",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-203/web.jpg?ver=12151358330001",
                width: 260,
                height: 192
            },
            {
                title: "In the tent",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-204/web.jpg?ver=12151358290001",
                width: 260,
                height: 192
            },
            {
                title: "Starting a laugh",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-205/web.jpg?ver=12151358330001",
                width: 260,
                height: 192
            },
            {
                title: "The whole gang",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-206/web.jpg?ver=12151358300001",
                width: 260,
                height: 192
            },
            {
                title: "Paddling downstream",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-207/web.jpg?ver=12151358280001",
                width: 260,
                height: 192
            },
            {
                title: "Carla and Sarah",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-208/web.jpg?ver=12151358320001",
                width: 260,
                height: 192
            },
            {
                title: "No shoes required",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-209/web.jpg?ver=12151358310001",
                width: 260,
                height: 192
            },
            {
                title: "Nancy",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-2010/web.jpg?ver=12151358280001",
                width: 260,
                height: 192
            },
            {
                title: "Getting ready to float",
                src: "http://gallery.me.com/emily_parker/100579/Lake-20Tahoe-2011/web.jpg?ver=12151358320001",
                width: 260,
                height: 192
            }
        ]
    }
    //Add more albums here...            
];

Sono poi incluse le librerie:
-jquery-1.3.2.min.js
-jquery-ui-1.7.1.custom.min.js

Se qualcuno avesse un'idea gli sarei molto grato
Matteo

[mr]

nessuno può aiutarmi?

[Valeriano Manassero]

Io sono tornato a sviluppare e fare da sistemista
Se vuoi aiuto puoi farmi MP così ti fo' preventivo

[mr]

Io sono tornato a sviluppare e fare da sistemista
Se vuoi aiuto puoi farmi MP così ti fo' preventivo

preferirei aiuto gratuito a dir la verità ...

[WizOfOz]

se non trovi nessuno smanioso di passare le sue ore a lavorare gratis (strano vero? ) puoi sempre provare con Rent A Coder: How Software Gets Done -- Home of the worlds' largest number of completed software projects
fai la tua richiesta e riceverai dei preventivi per la realizzazione di quello che chiedi....
se non ti piace rent a coder ci sono molti altri siti simili basta cercarli

[Uno]

se non trovi nessuno smanioso di passare le sue ore a lavorare gratis (strano vero? )

Anche perchè se lo trovasse gentilmente mi piacerebbe avere il contatto di questo santo, ho un sacco di cose che non riesco a fare perchè non ho tempo

---------------------------

Scherzi a parte, qui non si tratta di suggerire il cambiamento di una variabile, quale funzione od oggetto chiamare etc... qui si parla di impostare il lavoro (non puoi memorizzare sul mysql o su xml direttamente da javascript) e poi farlo di sana pianta consegnandotelo pronto da caricare MR....
Capisci che non è una richiesta da forum per aiuto gratis? O meglio domandare è lecito, ma se non trovi nessuno prendila con lo filosofia e accetta la cosa.

Se posso darti un consiglio, hai provato le gallery in php e mysql? Ce ne sono certe che hanno tutti i loro bravi plugin compresi effetti js... (non chiedermi quali che sono anni che non le guardo, prova a vedere qui PHP CMS Demos - opensourceCMS ce ne sono 11).

[Valeriano Manassero]

preferirei aiuto gratuito a dir la verità ...

Anche io, ma non sono mai riuscito a trovarne...

[mr]

No beh, io non intendevo di certo che qualcuno facesse il lavoro al posto mio, ma ci mancherebbe altro...io cercavo solo un'idea o uno spunto da cui partire per trovare una soluzione...comunque vedrò cosa riuscirò a tirar fuori, altrimenti cercherò qualcos'altro...

Anche io, ma non sono mai riuscito a trovarne...

Beh, io sui forum ho sempre trovato qualcuno disposto ad aiutare; anche io quando potevo ho sempre dato una mano agli altri...


Nel frattempo posso chiedervi una mano con un'altra cosa un po' più semplice?

Allora:
io ho una funzione js in cui sfrutto getElementById() per richiamare un elemento della pagina e compiere su di esso determinate azioni...ora, la questione è, perchè se richiamo direttamente la funzione, questa va senza problemi, mentre se la richiamo all'interno di un'altra funzione ottengo sempre l'errore

TypeError: Result of expression 'document.getElementById(*)' [null] is not an object.

Vi faccio un esempio:
ho ad esempio questa funzione

function cngClass(mode) {
	var a = getElementsSelected();
	if(a != null)
	{
		document.getElementById(a).className = "";
	}
	document.getElementById(mode).className = "selected";

}

se io all'interno della mia pagina la richiamo semplicemente con:

 onclick="cngClass('elemento')"

tutto funge senza problemi

però, se io la richiamo attraverso un'altra funzione, tipo questa:

function extLink(docname) {
	var cont = document.location.hash;
	if(cont !== '')
	{
		cont = cont.replace("#","");
		cngClass(cont);
	}
	
}

non funziona ed ottengo l'errore sopracitato

[Uno]

Ti rispondo ma ti prego di evitarmi il solito discorso sulla condivisione del forum bla bla, anche perchè se no ti banno (sto scherzando ovviamente)

Leggi qualcosa sulle variabili locali e globali.
Non puoi richiamare una funzione dentro un'altra se in qualche modo non dichiari dentro della funzione 2 l'esistenza della funzione 1
Devi usare le closures

Leggi questo: Le closure in Javascript - Stacktrace, aperiodico di resistenza informatica che mi pare molto semplice e chiaro

[mr]

aspetta, non so se ho capito bene...ma li si tratta di funzioni definite all'interno di una funzione, e poi richiamate all'esterno di questa...il mio problema invece è il contrario credo, cioè, la mia funzione è definita all'esterno ma è richiamata all'interno dell'altra funzione...

Comunque, secondo te io dovrei fare una cosa tipo questa:

function cngClass(b, mode) {
	var a = getElementsSelected();
	if(a != null)
	{
		b.getElementById(a).className = "";
	}
	b.getElementById(mode).className = "selected";

}

function extLink(docname) {
	var cont = document.location.hash;
	if(cont !== '')
	{
		cont = cont.replace("#","");
		var c = document;
		cngClass(c, cont);
	}
	
}

Ma allora perchè la funzione getElementsSelected() che richiamo all'interno di cngClass() funziona senza problemi?
Il suo codice è questo:

function getElementsSelected()
{
	var id;
	var _getAllTags = document.getElementsByTagName('*');
	for(var i = 0; i < _getAllTags.length; i++)
	{
		if (_getAllTags[i].className === "selected")
		{
			id = _getAllTags[i].id;
		}
	}
	return id;
}

[mr]

ehm...dai, solo un piccolo aiutino...

[Antonio]

ehm...dai, solo un piccolo aiutino...

Questo forum non è un help desk, leggi il regolamento: Linee guida HostingTalk.it per la partecipazione alla community

Se nessuno ti vuole o sa rispondere è inutile fare up...