Zoom immagini mercato

Zoom immagini mercato postato il 27/06/2011 10:26:54 nel forum programmazione, open source e hosting

Salve a tutti! Ancora una volta mi trovo costretto a rivolgermi a voi, oh potenti menti illuminate...bene...(modalità sviolinata OFF)

Tornando seri per un momento, avrei questo problema che mi sta facendo diventare matto, premetto che sto utilizzando la nuova versione del gdrcd 5.1 ovvero l'advanced.
In due parole, vorrei che al passaggio del mouse su di un oggetto nel mercato (e ovviamente poi anche nel proprio equip) apparisse più o meno al centro della pagina, l'immagine originale più grande.

Ora, io non sono pratico di programmazione in generale ma adoro smanettare e preferisco riuscire a capirle io stesso le cose piuttosto che trovarmi il lavoro fatto, anche perchè poi se dovessi avere dei problemi in merito non saprei dove mettere le mani non essendo farina del mio sacco. Per ora ho creato un nuovo campo nel batabase in mercato proprio sotto "urlimg" chiamandolo "urlbig" e modificato a dovere il file gestione_mercato.php e scheda_oggetti.php aggiungendo le stringhe di codice necessarie collegandole al nome del nuovo campo in tabella e fin qui tutto ok. Se vado per creare un oggetto mi appare sotto ad "immagine", un nuovo campo che ho chiamato "immagine grande".

Il problema è che non ho idea di come fargli dire in termini di css che al passaggio del mouse sull'immagine, visualizzi la sua corrispondente più grande, associata a quel nuovo campo nel db.
Ho provato con diversi codici reperiti da guide varie sull'argomento, ma non sono riuscito nel mio intento.
Spero che qualcuno di voi riesca ad illuminarmi (magari utilizzando termini semplici e non da programmatore professionista :P)

Grazie in anticipo, anche solo a tutti quelli che perderanno un po del loro tempo per leggere la mia richiesta!

27/06/2011 10:56:11 e modificato da whaiet il 27/06/2011 10:58:18

Grazie mille faber per l'immediata risposta!

A dire il vero gia ieri avevo provato a cercare cose simili in giro e ne ho trovati anche parecchi, il problema però è come integrarli con il pacchetto, in quanto quasi tutti questi script vanno a creare in una pagina html dei collegamenti alle immagini più grandi, quindi io in pratica dovrei aggiungere ogni volta anche il collegamento per ogni oggetto che inserisco nuovo nel mercato...e verrebbe una cosa un po impossibile...e non sono neanche sicuro che funzioni in quanto la struttura di gdrcd 5.1 credo sia un po più complessa di un semplice sito. In teoria dovrebbe esserci un modo per dare un unico comando a tutte le immagini degli oggetti del mercato che, se non ho visto male, con firebug sono sotto il div class= inventario_img.
quindi appurato ciò, non esiste un sistema in css per richiamare l'immagine associata al nuovo campo nella tabella del db quando vado sopra con il mouse su quella più piccola?

Grazie ancora!

27/06/2011 15:09:36 e modificato da leoblacksoul il 27/06/2011 15:19:55

^ Come dice Mr.Faber ^
Però whaiet aveva richiesto un linguaggio meno complesso credo XD

Oggi sono buono e mi è venuta voglia di scrivere XD
Allora prima di tutto css centra poco e niente, non è un linguaggio di programmazione ma serve solo per definire la formattazione delle pagina. Quindi per fare cose dinamiche non è molto utile (scordiamoci del pseudo-classi per un attimo); al massimo possiamo usare qualcos'altro che vada a modificare i css.
Questo qualcosa di solito è javascript, per i browser.
Io proporrei una cosa di questo tipo:
Nella pagina crea già l'elemento che conterrà l'immagine grande, ma non metterci dentro nessuna immagine e rendilo invisibile. Dovrebbe essere una cosa di questo tipo:

<div id="img_big"></div>

Diamogli un po' di stile nel css

#img_big{
position: absolute;
top: inserisci la distanza dalla cima della pagina.
left: inserisci la distanza dal bordo sinistro della pagina.
width: inserisci la larghezza del blocco.
display: none; /*per ora è invisibile*/
}

Poi, ogni oggetto ha già un suo id, fai in modo che questo id sia ereditato anche nel codice html e vada a richiamare una funzione che eseguiremo quando accade un evento specifico. Nel nostro caso l'evento specifico è quando il mouse passa sopra l'immagine e quando ci esce
Una cosa tipo:
Se la Scopa ha id_oggetto 10, allora nel tuo codice HTML facciamo comparire un:

<div class="inventario_img" onmouseover="show_big_img(10);" onmouseout="hide_big_img();">

Farlo per ogni oggetto con PHP è semplice. Le funzioni show_big_img e hide_big_img sono quelle se eseguiranno l'effetto, vediamo più avanti dove andremo a scriverle.

Ora che ogni oggetto nella pagina ha il suo id associato possiamo giocarci con Javascript.
Ma prima in PHP, man mano che il mercato scorre tutti gli oggetti della sezione e li visualizza facciamogli memorizzare le informazioni dell'immagine grande in un array che ci servirà dopo:

$big_imgs[$rs['id_oggetto']]=$rs['urlbig'];

Non so la sintassi esatta della pagina del mercato o dell'inventario, dovrai sistemarla. Ho considerato $rs come l'array che contiene tutte le informazioni che ci servono dell'oggetto.

Adesso spostiamoci alla fine del documento, dopo che tutta la tabella di oggetti è stata stampata. Inseriamo una nuova sezione <script> e usiamo PHP per creare del codice Javascript. Per nostra fortuna PHP ha delle funzioni native che convertono gli array di PHP in "array" di javascript:

<script><!--
var my_big_imgs=<?php echo json_encode($big_imgs); ?>
--></script>

Ora cosa abbiamo? Abbiamo dato al browser un indice: dentro a my_big_imgs ci sono tutti gli indirizzi delle immagini grandi degli oggetti di questa sezione, che possiamo richiamare conoscendo l'id dell'oggetto che vogliamo. A questo punto manca solo il codice delle funzioni che abbiamo scritto prima, che eseguiranno l'effetto magnifier.
Sempre all'interno dello <script> che abbiamo creato mettiamo un codice tipo questo:

function show_big_img(id){//Questa funzione prende l'immagine e la visualizza nel blocco img_big, rendendolo visibile
container=getElementById('img_big');//Trovo il blocco
var img = document.createElement("img");//Creo un elemento immagine
img.src=my_big_imgs[id];//Gli imposto l'url dell'immagine da visualizzare
container.appendChild(img);//metto l'immagine all'interno del blocco
container.style.display='block';//Rendo il blocco visibile
}
function hide_big_img(){
container=getElementById('img_big');//Trovo il blocco
container.style.display='none';//Rendo il blocco invisibile
while (container.hasChildNodes())//Rimuovo tutti gli elementi interni del blocco
container.removeChild(container.firstChild);
}

Sono un po' arrugginito con javascript puro, non ho testato questo codice potrebbe avere qualche problemuccio; ma la logica è questa.

27/06/2011 15:24:16

Ti ringrazio veramente di cuore per la cura con cui hai risposto ed elencato passo passo tutto ciò che deve essere fatto! Ora proverò a vedere se riesco a mettere in pratica i tuoi passaggi! speriamo bene...non essedno molto ferrato in materia mi ci potrebbe volere un po per mettere insieme tutto!

Grazie ancora!

27/06/2011 18:51:02 e modificato da leoblacksoul il 27/06/2011 18:54:22

mmh, non ho capito cosa intendi con adattare la pagina.

Forse pensavi a una lightbox? Quella però non funziona con onMouseOver, dovrebbe funzionare tipo con onClick.
Credo di aver dato le istruzioni per eseguire esattamente quello che aveva richiesto, se non ho interpretato male. Fatto un po' spartano, certo, ma io senza jQuery o simili non mi ci metto a fare cose più eleganti XD

27/06/2011 19:16:02

No no per me va benissimo anche in modo spartano! basta che la cosa funzioni ^^ A questo proposito...sto facendo varie prove, ma non riesco a far funzionare il procedimento. Sicuramente sbaglio io qualcosa, ma per essere più chiaro (se chiedo troppo mi scuso in anticipo) non è che mi potresti dire ogni tratto di codice, in quale pagina vada inserito? Io credo che il campo per determinare l'immagine grande e la funzione di show e hide vadano in gestione_mercato.php (correggetemi se sbaglio) ma la array e lo script js invece?

Grazie ancora per la disponibilità!

27/06/2011 22:36:52

Ancora non sono riuscito a venirne a capo...sicuramente sbaglio qualcosa...il problema è che non saprei dire cosa...

28/06/2011 00:03:55 e modificato da leoblacksoul il 28/06/2011 00:07:24

Tutto il codice che ti ho scritto va sulla stessa pagina. Puoi usarlo sia sul mercato che sull'inventario indifferentemente.
Sul mio pc ho ancora un versione alpha di GDRCD5.1 ma non dovrebbe essere cambiato troppo:
il primo div puoi metterlo dove vuoi dato che poi tanto viene portato fuori dal flusso del documento con il posizionamento. Il CSS devi inserirlo in uno dei css dello stile che usi. Per esempio nel mercato sarebbe ideale inserire il div alla riga 162, prima del <div class="elenco_record_gioco">

il codice che modifica il <div class="inventario_img"> invece dovrà essere dentro al while che stampa gli oggetti.
intorno alla riga 173 del mercato inizia il ciclo che stampa tutti gli oggetti in una categoria. Subito dopo l'apertura del ciclo, restando in modalità PHP metti la riga

$big_imgs[$row['id_oggetto']]=$row['urlbig'];

ovviamente devi esserti assicurato che la query alla riga 156 carichi il campo urlbig
Poi, intorno alla linea 177 del mercato trovi l'elemento che ti interessa.

<div class="inventario_img">

cambialo così

<div class="inventario_img" onmouseover="show_big_img(<?php echo $row['id_oggetto']?>);" onmouseout="hide_big_img();">

Infine lo script mettiamolo verso la chiusura, prima della riga 332

<? }//else ?>

così:

<!-- link back -->
bla bla bla

<script><!--
var my_big_imgs=<?php echo json_encode($big_imgs); ?>

function show_big_img(id){//Questa funzione prende l'immagine e la visualizza nel blocco img_big, rendendolo visibile
container=getElementById('img_big');//Trovo il blocco
var img = document.createElement("img");//Creo un elemento immagine
img.src=my_big_imgs[id];//Gli imposto l'url dell'immagine da visualizzare
container.appendChild(img);//metto l'immagine all'interno del blocco
container.style.display='block';//Rendo il blocco visibile
}

function hide_big_img(){
container=getElementById('img_big');//Trovo il blocco
container.style.display='none';//Rendo il blocco invisibile
while (container.hasChildNodes())//Rimuovo tutti gli elementi interni del blocco
container.removeChild(container.firstChild);
}
--></script>
<? }//else ?>

Per l'inventario sarà una cosa simile.

MrFaber, beh in effetti la mia è un'implementazione estremamente spartana proprio di una shadowbox. Anche una shadowbox si può lanciare con un evento onmouseover, ma boh non è una cosa che si vede in giro. Di solito viene aperta onClick