[risolto][js]passaggio valori da finestra

thaiboxer89

salve a tutti, vorrei creare un input esattamente come quando devo prelevare un file da sfogliare da una cartella del pc, ma in realtà mi deve aprire un popup con delle immagini caricate sul server, e sul momento che clicco su una immagine il popup si deve chiudere e nell'input viene restituito il path dell'immagine, solo che non mi è molto chiaro il passaggio dei valori da finestra!

maxco · Messaggio da **maxco** » mercoledì 27 luglio 2016, 15:29

Da quello che ho capito le immagini sono sul server, quindi a te non serve l'intero path ma solo l'identificativo dell'immagine scelta. Potresti fare una funzione js che ti ritorna esattamente il nome dell'immagine cliccata, alla finestra "madre" e poi fare una semplice concatenazione di stringhe.

thaiboxer89

maxco [url=http://forum.ubuntu-it.org/viewtopic.php?p=4900904#p4900904][img]http://forum.ubuntu-it.org/images/icons/icona-cita.gif[/img][/url] ha scritto:Da quello che ho capito le immagini sono sul server, quindi a te non serve l'intero path ma solo l'identificativo dell'immagine scelta. Potresti fare una funzione js che ti ritorna esattamente il nome dell'immagine cliccata, alla finestra "madre" e poi fare una semplice concatenazione di stringhe.

esattamente! solo che non so come funzionano i passaggi dalla finestra...hai qualche esempio di codice da cui possa prendere spunto?

maxco · Messaggio da **maxco** » mercoledì 27 luglio 2016, 16:10

Te l'ho scritto ho fatto prima

Codice: Seleziona tutto

<html>
<head>
</head>
<script>
<!--
var w;
function apriFinestra(){ //apro la finestra identificata da w
    w = window.open('mio.html','_blank','width=250, height=150, scrollbars=yes, resizable=yes')
}
 
function valoreRitorno(valoreparametro) { //funzione che utilizzo per prendere il valore dalla finestra di poupop
	document.getElementById("parametro").value = valoreparametro;  
	w.close();  //chiusura automatica del poupop dopo il click sull'immagine
}
-->
</script>
<body>
<input type="text" size="50" name="parametro" id="parametro"></br><a href="javascript:apriFinestra()">Cartelle</a>
</body>
</html>

Nel poupop(mio.html):

Codice: Seleziona tutto

<html>
<body>
<a href="identificativo_immagine" onClick="opener.valoreRitorno('identificativo_immagine');return false;">identificativo immagine</a>
</body>
</html>

Messaggio da **Zoff** » mercoledì 27 luglio 2016, 16:17

Demo: https://jsfiddle.net/5dq76d8y/2/

Spiegazione:
Ipotizziamo di avere un file getimagelist.php che restituisce qualcosa tipo:

Codice: Seleziona tutto

<?php

echo json_encode([
    'img1' => 'path/immagini/img1.jpg',
    'img2' => 'path/immagini/img2.jpg',
    'img3' => 'path/immagini/img3.jpg',
    'img4' => 'path/immagini/img4.jpg'
]);

Richiesta ajax:

Codice: Seleziona tutto

var inputDestinazione = jQuery('#qualcheSelector');
jQuery.getJSON('getimagelist.php').success(function(images){
    var popUp = jQuery('<div class="popup"><h2>Select an image:</h2></div>');
    jQuery.each(images, function(imageName, imagePath){
    	var img = jQuery('<img class="image">');
    	img.attr('alt',imageName);
    	img.attr('src',imagePath);
    	img.css({ cursor: 'pointer' });
    	img.onclick(function(){
    		popUp.remove();
    		inputDestinazione.val(imagePath);
    	});
        popUp.append(img)
    });
    jQuery('body').append(popUp);
})

Ovviamente dovrai applicare degli stili CSS per farlo visualizzare come si deve, ad esempio:

Codice: Seleziona tutto

.popup {
    position: fixed;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: #ffffff;
    border: solid thin #333333;
    box-shadow: 5px 5px 5px #999999;
}
.popup h2 {
  margin: 1em;
}
.popup .image {
    display: inline-block;
    height: 200px;
    width: auto;
    opacity: 0.6;
}
.popup .image:hover {
  opacity: 1;
}

thaiboxer89

Perfetto grazie mille!

Forum Ubuntu-it

[risolto][js]passaggio valori da finestra

[risolto][js]passaggio valori da finestra

Re: [js]passaggio valori da finestra

Re: [js]passaggio valori da finestra

Re: [js]passaggio valori da finestra

Re: [js]passaggio valori da finestra

Re: [js]passaggio valori da finestra

Chi c’è in linea

Accedi • Iscriviti