[Javascript] data-src aanspreken

[Dutch_guy]

Ik heb een rij met thumbnails en daarboven een grote afbeelding.

Nu kan ik met de volgende code door op de thumbnail te klikken de grote afbeelding laten veranderen:

code:

<script type="text/javascript">
  function showImage(image){
    var mainImage = document.getElementById('mainImage');                 
    mainImage.src = image;
}
</script> 

<li><img src="images/groteafbeelding.jpg" id="mainImage"></li>

<img src="images/kleineafbeelding1.jpg" showImage('images/groteafbeelding1.jpg')>
<img src="images/kleineafbeelding2.jpg" showImage('images/groteafbeelding2.jpg')>
<img src="images/kleineafbeelding3.jpg" showImage('images/groteafbeelding2.jpg')>

Verder niet heel spannend en de werkelijke code toont afbeeldingen uit een database, met een jquery slider etc.

Met die slider kan je de code ook zo aanpassen dat de afbeelding geladen worden als ze nodig zijn, als volgt:

code:

<li id="mainImage" data-src="images/groteafbeelding.jpg"><img src="images/placeholder.png"></li>

Oftewel de grote afbeelding wordt dan geladen d.m.v. data-src.

Mijn scriptje werkt dan dus niet meer. Immers moet nu data-src vervangen worden ipv de src van de afbeelding.

Ik krijg dit niet voor elkaar. Ik meen dat het iets in de vorm moet zijn als: getAttribute("data-src"), maar het wil niet lukken.

[storeman]

Bij je eerste stukje code hoop ik dat er nog een onClick attribuut mist, maar dat terzijde.

Je moet niet de data-src vervangen, nog steeds de src. Het zou zoiets moeten worden:

JavaScript:

function showImage () {
    var src = this.getAttribute('data-src');
    this.getElementsByTagName('img').src = src;
}

HTML:

<li onclick="showImage()" data-src="my-img.jpg"><img src="small-img.jpg" alt=""></li>

[Dutch_guy]

Ja klopt, de onclick moet op de thumbnails zitten.

Echter ik moet dus de data-src vervangen van de grote afbeelding, oftewel die met id "mainImage". De img src van de grote afbeelding is een 1x1 placeholder pixel, zoals de slider vereist.

[ Voor 22% gewijzigd door Dutch_guy op 21-07-2014 18:18 ]

[storeman]

Ik heb geen idee waar je het nu over hebt. De data-src vervangen? Waarom zou je dat willen? Het data-src attribuut is net als elk ander data-* attribuut totaal waardeloos voor het renderen en laden. Puur bedoelt om data op te slaan.

Heb je verder überhaupt naar mijn 5 regels code gekeken?

[Dutch_guy]

Die slider vereist dat de afbeelding op die manier wordt geladen:

code:

For the second method, to add an image using a link, insert a data-src attribute for the <li> tag: 

<li data-src="images/photo1.jpg">
    <img src="images/placeholder.jpg" />
</li>
 

This method will reduce the initial download time using lazy loading. The image is downloaded as needed instead of all at once. 

From the example, once photo1.jpg is finished loading, it will replace placeholder.jpg. It is recommended you use a small place holder image, preferably a transparent 1 x 1 pixel image.

Als ik dus op de thumbnail "thumbnail_photo2.jpg" klik, dan moet de data-src in bovenstaand voorbeeld dus veranderen naar: data-src="images/photo2.jpg.

Ik moet het op die manier doen omdat ik zeker 40 afbeeldingen laad, die wil ik niet allemaal in 1x laden, maar wanneer nodig (wanneer er gescrold wordt).

[Spinal]

Dutch_guy schreef op maandag 21 juli 2014 @ 17:50:[...] Ik meen dat het iets in de vorm moet zijn als: getAttribute("data-src"), maar het wil niet lukken.

Zie MDN:

JavaScript:

var data = this.dataset; // Dit haalt alle data-* op van de <li> waar je op klikt
var data_src = data.src; // Dit is de waarde van "data-src" van de <li>

Zoiets zou moeten werken

[vpm]

Dutch_guy schreef op maandag 21 juli 2014 @ 21:30:
Die slider vereist dat de afbeelding op die manier wordt geladen:

<code>

Als ik dus op de thumbnail "thumbnail_photo2.jpg" klik, dan moet de data-src in bovenstaand voorbeeld dus veranderen naar: data-src="images/photo2.jpg.

Ik moet het op die manier doen omdat ik zeker 40 afbeeldingen laad, die wil ik niet allemaal in 1x laden, maar wanneer nodig (wanneer er gescrold wordt).

Volgens mij haal je dingen door elkaar. Volgens de bijgesloten code vervangt de plugin zelf de placeholder met de link in data-src. Jij hoeft zelf niks meer aan te passen in data-src.

Mocht je werkelijk bedoelen dat je door op thumbnails te klikken een grote afbeelding laadt, weet ik niet wat voor plugin je gebruikt. Dit klinkt namelijk alsof je zelf een slider aan het schrijven bent... Met bovenstaande voorbeelden zou dat moeten lukken.

Voor het gemak zou je jQuery kunnen gebruiken:

code:

$('img.thumbnail').onClick(function(){
  var src = $(this).parent().data('src');
  $('#slider').attr('src', src);
});

Iets in die trant.

[ Voor 25% gewijzigd door vpm op 22-07-2014 09:59 ]

[Dutch_guy]

Ik denk dat ik niet helemaal duidelijk ben geweest en ik kom er echt niet uit na vele pogingen.

Hieronder de situatie:



Zowel de onderste balk als de bovenste balk bevat de slider. Door te klikken op een linker en rechterpijl in de thumbnails of in de grote foto, kan je de volgende rij thumbnails tonen, of de volgende grote foto.

Nu wil ik dus dat als je onderaan op een thumbnail klikt, die in het groot erboven wordt weergegeven, in de plaats van de huidige grote afbeelding die dan getoond wordt.

Voorheen liet ik de slider de afbeeldingen tonen middels <li><img src=""></li> En zo kon ik met een simpel javascriptje dit voor elkaar krijgen.

Echter nu werk ik in beide sliders met <li data-src=""></li> om de afbeelding te kunnen tonen.

Volgens mij moet ik dan de data-src van de grote afbeelding dynamisch kunnen wijzigen?

Mocht dit niet zo werken, is het dan mogelijk dat als ik een thumbnail klik, ik de hele <li data-src=""></li> om kan zetten naar: <li><img src=""></li>? Dan moet ik volgens mij ook bereiken wat ik wil?

[Tsjilp]

Geen idee of dit is wat je wil, maar heb je dit:

code:

document.getElementById('mainImage').setAttribute('data-src', this.getAttribute('data-src'));

al geprobeerd?

En als mainImage de img tag is en de data-src moet op de LI:

code:

document.getElementById('mainImage').parentNode.setAttribute('data-src', this.getAttribute('data-src'));

[Dutch_guy]

Iemand die mij nog uit de brand kan helpen?

Ik heb hier het hele verhaal nog eens neergezet, met code die wel werkt als ik de afbeeldingen normaal in de image tag zou zetten:

http://stackoverflow.com/...on-click-of-smaller-image

[RobIII]

Ik heb je topic amper gelezen noch de SO vraag goed doorgenomen maar als ik dit zie haak ik al af:

HTML:

<ul class="ts-list">
<li><img id='mainImage' src='images/thumbnails/website/350930_1e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_2e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_3e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_4e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_5e.jpg'></li>
</ul>

Je weet dat een id uniek moet zijn binnen een pagina, right?

quote: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

This attribute assigns a name to an element. This name must be unique in a document.

quote: http://www.w3.org/TR/html...utes.html#common.attrs.id

There must not be multiple elements in a document that have the same id value.

Ik zou eens beginnen bij de basis en de documentatie van je imageviewer-dinges-javascript door te nemen.

[ Voor 25% gewijzigd door RobIII op 31-07-2014 13:16 ]

[Dutch_guy]

Dat moet nog aangepast worden, het ging even om het voorbeeld dat nu wel werkt met de image tag. De documentatie van de imageviewer-dinges-javascript zegt hier niets over, simpelweg omdat hoe ik het wil niet tot de standaard mogelijkheden behoort.

[Klaasvaak]

Zoals je het nu probeert op te lossen blijft er weinig over van de volgorde in je slider.
Als je het netjes wil zal je de sliders moeten syncen, maar dat zit niet standaard ingebakken.

Om het in de meest simpele vorm toe te voegen:

JavaScript:

//dit aan i.prototype toevoegen
gotoSlide: function (i) {
    this._$scroller.trigger(C);
    this._currIndex = i;
    this._$scroller.trigger(E);
//    this._options.onGoto.call(this);
    this.updateSlideList(true);
}

//dit aan variable w toevoegen
goto: function (i) {
  u(this).data(t).gotoSlide(i);
}

//dit in de load functie
$("#ts li").css({cursor:'pointer'}).bind('click', function() {
  $('#ts').thumbScroller('goto', $(this).index());
  return false;
});