» »

Javascript:sprememba/naložitev nove slike v DIV

Javascript:sprememba/naložitev nove slike v DIV

JayKay ::

problem je sledeči:
ob kliku na link bi želel v div-u z določenim id-jem zamenjati sliko (brez refresha)
Za spremembno vsebine uporabljam tole
Pri tem scritpu novo vsebino v div naložiš takole:
javascript:ajaxpage('work.html', 'wrapper');, se pravi ime html fajla in id diva.
Zadeva pa nikakor ne deluje če linkaš na jpg.

Ma kdo kako idejo /ali pa ve za kakšen script, ki mu to uspeva?

Gandalfar ::

Daj si za zacetek vzami jQuery pa pusti te garazne skripte na miru.

Metode, ki so ti relevantne so:

http://docs.jquery.com/Ajax/load#urldat... - tole je isti load.

Ce pa hoces samo zamenjat vsebino diva pa lahko vedno naredis nekaj v stilu:

$('#mylink').click(function() {
  // Act on the event
  
  // ena moznost je, da samo kaksni sliki spremenis src
  $('#myimg').attr('img', 'http://bla.com/slika.jpg')
  
  // ali pa kar celo vsebino diva s tem, da ji das sliko notr
  $('#mydiv').html('<img src="http://bla.com/slika.jpg" alt="" />')
});


Uglavnem, preberi si kaksen jQuery tutorial. Stvar ni tezka pa veliko lazje bos programiral kot direktno z javascriptom.

JayKay ::

Sem gledal ze jquery, specificno tega pa mi nikakor ni uspelo zlodat slike na klik, ceprav sem dobesedno prepisal kodo, ki je v videu. sem bolj slab za programiranje

Gandalfar ::

Daj pokazi svojo kodo

JayKay ::

ta jquerry sem testiral lokalno. bom popoldan se enkrat probal in postal kodo.
drugace pa:
http://www.igloo.si/ostalo/nick_jeeves4/
specificno:work-2008
link numbers 1 and 7 je takoj aktivno, sliko pa sem vstavil v div id"display_window_work" (lahko bi dal tudi v css za background)
pri kliku na numbers 37 and 75 pa drugo sliko :)

root987 ::

Če grem klikat po Xmas cards in ostalem - datoteke ne obstajajo in dobivam 404 nazaj, če pa kliknem na number 37 to 75 pa vrneš nek html (index?), ki ga potem prikažeš.

Dve stvari: Začni uporabljat Firebug in bo debugganje kode kar naenkrat postalo trivialno v primerjavi z zdaj. ;)

Potem pa kot je rekel gand začni uporabljat jQuery ali kakšen podoben library ter raje tako minimalne stvari naredi sam na roke kot pa da copy pastaš skripte, za katere ne veš kaj delajo in kako, njihovo debuganje je pa pain in the ass. To kar ti je gand spisu je more or less že vse kar rabiš za menjavo slike/htmlja.
"Myths which are believed in tend to become true."
--- George Orwell

JayKay ::

root987. ostalli linki v work ne delajo (ker nisem sel najprej dokler ne resim tega.). vse ostale html vsebine, klicem v div preko ajaxpage funkcije. Vem da ta funkcija ne podpira klica jpeg, zato iscem alternativo.

kogledom ::

Prijazen nasvet - tretjič: uporabi kakšno JavaScript knjižnico: jQuery.com ali Prototype, sploh ker si rekel da si bolj slab za programiranje. S tem si boš zelo olajšal delo, verjemi.
Alternative po katerih vprašuješ ti je že podal Gandalfar (podal je kako se to naredi z jQuery).
S sodobnimi knjižnicami lahko sproti spreminjaš DOM, ne le s klicanjem zunanjih html (s tvojim ajaxpage() si omejen samo na to), na voljo imaš ogromno drugih možnosti, najzanimivejše za tvoj problem so ti že svetovali.
Če pa bi rad naredil s tem kar uporabljaš pa primer: ajaxpage(url_do_slikaxx.html, id_div), v html (url_do_slikaxx.html) pa img stavek. Torej html stran za vsako sliko. To je pa dosti nepotrebnega dela.
Torej čimprej preidi na sodobno knjižnico pa boš imel dosti manj problemov, tudi s kompatibilnostjo browserjev, ker ti knjižnica v ozadju poskrbi tudi za to.

JayKay ::

Mi je zdaj uspelo uredit da naloži sliko v div s kodo
$(function (){
$('a').click(function() {
loadImage();
return false;
});
});

function loadImage(){
var img = new Image();
$(img).load(function () {
$('#display_window_work').append(img);
}).attr('src', 'media/work2008/Xmas2.jpg');
}

To deluje če gledaš to stran posamično. Ker pa imam narejeno tako, da se vse vsebine nalagajo v index.html (odvisno kaj pač gledaš), pol ta jquerry neha dela.
Evo simple primer:
http://www.igloo.si/ostalo/jquery/test.... zadeva normalno naloži sliko v div.
http://www.igloo.si/ostalo/jquery/index... , ko pa sem test.html z load funkcijo naložil v index.html pa slike ne naloži v div.
Možno ker ne najde tega diva? Ne vem

Sem pa že razmišljam, da bi ročno delal vse htmlje za vsako sliko, pa me je minilo...

root987 ::

Močno priporočam da nehaš samo copy/pastaš kodo in si tudi pogledaš kaj v dokumentaciji.

Torej, load.

For elements, it fires when the target element and all of its content has finished loading. Note: load will work only if you set it before the element has completely loaded, if you set it after that nothing will happen.


$(function (){
    $('a').click(function(event) {
        $('#display_window_work').append($("img").attr("src", "media/work2008/Xmas2.jpg"));
        event.preventDefault();
    });
});
"Myths which are believed in tend to become true."
--- George Orwell

JayKay ::

žal ne pomaga... Očitno Live Query zna rešit zadevo. samo implementirat mi mora uspet

Zgodovina sprememb…

  • spremenil: JayKay ()

root987 ::

Ah, točn, ti že pri drugem kliku na novo naložiš html - namest Live Query plugina uporabi (kot ti na tvojem linku piše malo bol spodaj) Events/live metodo, ki je bila implementirana v jQuery 1.3.

Mam pa eno vprašanje - glede na to da je tu precej statičen html, zakaj sploh uporabljaš javascript za ta meni? Brez JS bi to že zdavnaj rešil problem pa še accessible bi bil za tiste, ki imajo JS izklopljen...
"Myths which are believed in tend to become true."
--- George Orwell

Zgodovina sprememb…

  • spremenil: root987 ()

JayKay ::

zanimivo..kako bi rešil brez JS, na način da se stran ne osveži pri nalaganju nove vsebine - kar pač ajax počne?

sem pomislil malo glede jquery principa: tudi če mi ta problem uspe rešit, mora za vsaki externi html in vsako sliko spisat load, click pa live funkcije.

Zgodovina sprememb…

  • spremenil: JayKay ()

root987 ::

Zakaj pa se stran ne sme osvežit? Itak se CSS pocacha, html se pa po vsaki napol spodobni povezavi pretoči takoj.

Načeloma verjetno ne rabiš spisat jquery funckij za vsak html, vendar moraš narest nek algoritem po katerem bo potem tista ena funkcija delala (ne vem, v stilu:

Če maš take linke: <a class="menuitem" href='abc.html'>abc</a>

$(function(){
  $("a.menuitem").live('click', function(e){
    $('wrapper').load($(this).attr('href'));
    e.preventDefault();
  })
});

S tem da tu ta load ni isti kot tisti prej, kjer si podajal kot argument funkcijo, tu pa podajaš string, ki je url - poglej si Ajax/load. Stvar je še celo tako pametna, da ji lahko podaš selector, ki določi katere elemente iz naloženega dokumenta hočeš prikazat (verjetno lahko torej vržeš v en HTML dokument vso svojo kodo in primerno spesniš selector, ki bo z pametno spisanim algoritmom vedno delu).
"Myths which are believed in tend to become true."
--- George Orwell

Zgodovina sprememb…

  • spremenil: root987 ()

JayKay ::

pač želja naročnika, da naj se ne osvežuje....
verjamem, da se s to knjižico da delat čudovite zadeve, ampak žal ni časa za učenje.
Hvala za temeljit odgovor in pomoč.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč
8710679 (9417) lisjak
»

Login popup box login error.

Oddelek: Programiranje
91070 (958) usoban
»

Frame

Oddelek: Izdelava spletišč
251675 (1403) Mesar
»

jQuery load

Oddelek: Izdelava spletišč
61461 (1378) MrBrdo
»

linkanje med div-i?

Oddelek: Izdelava spletišč
141541 (1359) MrBrdo

Več podobnih tem