Problem z funkcją powiększającą zdjęcia, php jquery Opcje

[suful]

Witam,
Jestem początkujący jeśli chodzi o programowanie w PHP, tym bardziej w JQuery. Przejdę jednak do sedna.

Na stronie, którą stworzyłem funkcją while wyświetlam zdjęcia z bazy danych MySQL w 2 kolumnach za pomocą tabeli w następujący sposób:

$licznik = "0";
$kolumny = "2";
echo '<table>';
while($row = mysqli_fetch_object($result))
{
$licznik++;
$opis= $row->opis;
$image = $row->image;
if($licznik == "1") {
echo '<tr>'; }
echo '<td>
<div class="zoom">
<img src="data:image;base64,'.$image.' " width="245px" >
<p>Kliknij, aby powiększyć</p>
</div>
<center style="position: center; font-size: 12px">'.$opis.'</center></br>
</td>
';
if($licznik == $kolumny) {
echo '</tr>';
$licznik = "0";
}

}
echo '</table>';

Klasa zoom odpowiedzialna jest za powiększanie zdjęcia, dzieje się to przy pomocy funkcji JQuery onclick, mniejsza o to. Problem w tym, że funkcja działa tylko do pierwszego zdjęcia z bazy danych, dla reszty powiększenie zdjęcia nie działa. Czy jest możliwe przerobienie pętli tak, aby wszystkie zdjęcia dało się powiększyć, czy jest to po prostu nie możliwe w ten sposób.

Sorry za chaotyczne pisanie, nie mogę poradzić sobie z tym problemem, z góry dzięki za pomoc. Pozdrawiam

[kapslokk]

Powinieneś wrzucić raczej kod javascript a nie php, bo z tego co napisales wynika ze problem jest wlasnie w javascriptach a nie php.

Btw. Czemu zdjecia masz akurat wrzucane base64 a nie jako plik z dysku?

Ten post edytował kapslokk 24.08.2015, 19:48:17

[suful]

funkcja js:

<script>
$(document).ready(function(){
$('#ex3').zoom({ on:'click' });
});
</script>

Obrazy przechowuję w bazie danych na lokalnym serwerze, base64 chyba nie ma tu żadnego znaczenia?

plik css:
.zoom {
display:inline-block;
position: relative;
}


.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(icon.png);
}

.zoom img {
display: block;
}

.zoom img::selection { background-color: transparent; }

do:
<div class="zoom">
dodałem id="ex3", ale dalej funkcja działa tylko dla pierwszego obrazu

Funkcja działa poprawnie, ale działa tylko dla pierwszego obrazu :/

[mls]

Kod

$(document).ready(function(){
$('.zoom').zoom({ on:'click' });    
});

?

Ten post edytował mls 25.08.2015, 10:24:05