Ładowanie zdjęcia do DIVa - jQuery

Dla specjalistów Webmastering
#1

Witam! Znalazłem ten poradnik:

http://www.dobreprogramy.pl/slepciu/AJAX-i-jQuery-cz.-1,31571.html

 

Teraz męczę się z przerobieniem kodu tak aby zamiast plików html ładowały się zdjęcia jpg/png, ale nie za bardzo mi to wychodzi. Ktoś wie jak to zmienić? Linki miały by wyglądać tak:

 

<div id="all">
    <div id='header'>
        <h3>Nasze logo</h3>
    </div>
    <div id="menu">
        <a href="img1.jpg">Zdjecie 1</a>
        <a href="img2.jpg">Zdjecie 2</a>
        <a href="img3.jpg">Zdjecie 3</a>
    </div>
    <div id="content">
        <p>Zawartość strony</p>
    </div>
</div>

Z góry dziękuję za pomoc!

#2

Co dotychczas zrobiłeś ? Co ci nie działa ?

#3

 

Aktualnie kod “Galerii” wygląda tak:

<div style="float: left; width: 165px" id="menu">
<a href="uploads/img1.jpg">Projekt1</a>
<a href="uploads/img2.png">Projekt2</a>
<a href="uploads/img3.jpg">Projekt3</a>
</div>

<div style=" float: right; width: 757px;" id="content"></div>

<script type="text/javascript">
    $(function(){
       $("#menu a").click(function(e){
           $("#content").load("ajax/"+$(this).attr('href'));
               e.preventDefault();
       })
    })
</script>

Plik HTML wczyta, ale zdjęcia nic z tego :smiley:

 

EDIT

 

Z edytowałem skrypt następująco:

<script type="text/javascript">
       $("#menu a").click(function(e){
           document.write('<img src="'+$(this).attr('href')+'" alt="" />');
               e.preventDefault();
       })
</script>

i wstawiłem go w DIVa z ID Content. Teraz po kliknięciu zmienia się cała strona zamiast zawartość DIVa :smiley: Jak to mozna naprawic?

#4

Po co to (e) tego nie powinno być tylko sam pusty nawias.

#5

Zobacz link z pierwszego posta. + Bez tego e nie działa :smiley:

 

EDIT

 

Okej, zrobiłem za pomocą innerHTML :slight_smile:

#6

krisp chyba na oczy jquery nie widział :wink:

Zanij od tego czy masz obrazki w folderze ./ajax/upload/

A co do twojego kodu, element document jest javascriptowym kontenerem na całą stronę

twój div ma id content więc zamiast document powinieneś mieć $("#content")

Poza tym powinieneś użyć html a nie write.

 

$("#content").html('tutaj jest twój html');

Ale weź pod uwagę, że zmieniasz tylko atrybut src, więc po co ładować całe img, oraz powinieneś mieć coś jako wartość początkową np:

<div style="float: left; width: 165px" id="menu">
  <a href="uploads/img1.jpg">Projekt1</a>
  <a href="uploads/img2.png">Projekt2</a>
  <a href="uploads/img3.jpg">Projekt3</a>
</div>

<div style=" float: right; width: 757px;" id="content"><img src="./uploads/img1.jpg" alt="" /></div>

A jquery

$("#menu a").click(function(e){
  $("#content img").attr('src',$(this).attr('href'));
  e.preventDefault();
})
#7

 

I właśnie tego użyłem :slight_smile: Dzięki za pomoc :slight_smile: