Επιλογή image από select menu (PHP)
programming, tutorials / tips - 16.03.2008 14:27 - 3 σχόλια
Επειδή με παίδεψε, και επειδή θεωρώ ότι είναι χρήσιμο για ενσωμάτωση σε CMS που παραδίδονται στον πελάτη ώστε να κάνει μόνος του τα update του web site.
Σενάριο
Θέλουμε να αποθηκεύουμε σε μια βάση δεδομένων MySQL, το όνομα αρχείου μιας φωτογραφίας που θα συνοδεύει την εκάστοτε εμφάνιση του record.
Τρόπος Επιλογής Φωτογραφίας
Έχουμε ανεβάσει τις φωτογραφίες (μέσω FTP ή μέσω ενός upload script) στο folder του server.
Με PHP εμφανίζουμε τα ονόματα των αρχείων από το συγκεκριμένο folder, και με την επιλογή κάποιου αρχείου, εμφανίζεται η φωτογραφία με χρήση javascript.
<select name=»photo» onChange=»previewPic(this)»>
<?php
if ($handle = opendir(‘photos/’)) {
while (false !== ($file = readdir($handle))) {
if ($file != «.» && $file != «..») { ?>
<option value=»<? echo $file ?>»><? echo $file ?></option>
<?
}
}
closedir($handle);
}
?>
</select>
Πριν κάνουμε αυτό έχουμε φροντίσει να περάσουμε όλες τις φωτογραφίες του folder σε ένα javascript function ώστε να γίνεται το preview.
<script language=»JavaScript»>
function previewPic(sel) {
document.previewpic.src=»photos/» + sel.options[sel.selectedIndex].value;
}
function showPic(sel) {
images = new Array();
<?php
if ($handle = opendir(‘photos/’)) {
while (false !== ($file = readdir($handle))) {
if ($file != «.» && $file != «..») { ?>
images[1] = «<? echo $file ?>»;
window.location.href = images[sel.selectedIndex+1];
<?
}
}
closedir($handle);
}
?>
}
</script>
17:05 - 17.03.2008
Απόστολε επέτρεψε μου να το δώσουμε και σε ASP γιατί με με παίδεψε και εμένα.
Φωτογραφία Προϊόντος
<option value=»">
var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.productimage
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById(«dynamic3″): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML=’Loading image…’
contentobj.innerHTML=»}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write(»)
document.dynamic1.document.dynamic2.document.close()
}
else
alert(‘You need NS 4+ or IE 4+ to view the images!’)
}
function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}
if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}
Το κάνω copy paste κατευθείαν από prject όποιος το χρησιμοποιήσει θα πρέπει να προσαρμόσει τις διαστάσεις και class ανάλογα με τα δικές του ανάγκες.
08:53 - 18.03.2008
@ Giorgos
σωστός!
13:56 - 18.03.2008
Ορθή επανάληψη !!
<option value=»">
var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.productimage
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById(«dynamic3″): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML=’Loading image…’
contentobj.innerHTML=»}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write(»)
document.dynamic1.document.dynamic2.document.close()
}
else
alert(‘You need NS 4+ or IE 4+ to view the images!’)
}
function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}
if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}
**διαστάσεις,paths και css ανάλογα με τις δικές σας ανάγκες.