PDA

View Full Version : [PHP] Presentazione foto e sistema di votazione


robertino_salemi
27-04-2015, 09:06
Salve a tutti,
vorrei chiedervi un consiglio...

Ho creato un gestione tramite il quali gli utenti iscritti possono caricare delle foto le cui informazioni vengono memorizzate in un DB.

Adesso dovrei creare un sistema di presentazione a tutto schermo, tramite il quale:
- vengono visualizzate le foto (solo foto senza testo aggiuntivo), per questo avevo pensato a Supersized (http://buildinternet.com/project/supersized/)
- sopra le foto dovranno essere visualizzati due button con A (Amesso) o R (Riufitata)

Suggerimenti?
Potrei basarmi su qualcosa di pronto o devo costruire tutto a manina?

Grazie.

paooolino
27-04-2015, 12:26
non è che ci sia molto da costruire...

con due righe html/css crei due link e li posizioni dove vuoi

i link punteranno ad un tuo script php che registrerà nel db quale è stato premuto, secondo le tue logiche

altrimenti puoi usare due pulsanti che in JS rispondono all'evento onclick e fare la stessa cosa via ajax.

robertino_salemi
27-04-2015, 13:54
Si infatti, era giusto per avere un consiglio.

Opterò nell'utilizzo di uno slider fullscreen più due button in ajax.

:D

robertino_salemi
28-04-2015, 10:48
Alla fine la scelta è ricaduta su Supersized (http://buildinternet.com/project/supersized/).

Ma ho un problema:
sullo slider dovrei visualizzare un button che riporti esattamente l'ID o qualche riferimento all'immagine corrente.

Così ho inserito nella mie immagini:

slides:
[
{image : 'slides/kazvan-1.jpg', id : '1', title : 'TITLE 01', thumb : 'thumbs/kazvan-1.jpg', url : ''},
{image : 'slides/kazvan-2.jpg', id : '2', title : 'TITLE 02: Maria Kazvan', thumb : 'thumbs/kazvan-2.jpg', url : ''},
],


nella mia pagina ho aggiunto:

<button class="btn_rate">ID: $id</button>


nello script (presente nella demo) in theme/supersized.shutter.js nella funzione afterAnimation ho aggiunto:

afterAnimation : function(){
if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar

//GET del custom field
var custom_field = api.getField('id');
//GET del testo dentro il button
var text = $("button.btn_rate").text();
//Replace di $id
text = text.replace("$id", custom_field);
//Visualizzazione
$("button.btn_rate").html(text);
},


cosa da visualizzare (per il momento) l'ID dell'immagine corrente.

Il tutto funziona, ma:
1) nella prima slide non avviene il replace perchè ovviamente lo script viene eseguito in afterAnimation
2) se lo inserisco nella metodo beforeAnimation il replace viene eseguito per la prima slide e non per le altre...

Come risolvere?

Grazie.

paooolino
28-04-2015, 11:11
e se lo metti sia nella init che nella afterAnimation?


theme._init( )
Houses the majority of your theme functionality, as it is the first theme function called once the initial slide loads.
trigger : first image loaded

paooolino
28-04-2015, 11:13
stai attento però... guarda che tu la prima volta sostituisci $id ma poi vai a cercare sempre $id per le successive... ma $id non esiste più dopo la prima sostituzione.

quindi può anche darsi che con la soluzione di beforeAnimation funzioni.

robertino_salemi
28-04-2015, 11:33
Hai ragione, se al posto di un text.Replace() eseguo un .html() viene visualizzato l'ID della slide corrente anche su beforeAnimation().

Ho risolto inoltre rendendo il button unico tramite il suo ID:
HTML:

<button class="btn_rate" id="">ID: $id</button>


JS:

//GET del custom field
var custom_field = api.getField('id');

$("button.btn_rate").attr('id',custom_field);


Grazie! :)