</div> <script type="text/javascript"> $(function(){ $('.galleryImgs').click(function(){ $('.gallery').show(); "> </div> <script type="text/javascript"> $(function(){ $('.galleryImgs').click(function(){ $('.gallery').show(); "> </div> <script type="text/javascript"> $(function(){ $('.galleryImgs').click(function(){ $('.gallery').show(); " />

Jquery Image Gallery Next Button

Het lijkt erop dat deze jQuery-galerij niet werkt. Ik heb de .galleryImgs-klikfunctie kunnen laten werken, maar de # gallery-klikfunctie lijkt niet te werken. Het is verondersteld om het kenmerk data-src te krijgen van de volgende .galleryImgs div en deze in te stellen in de .galleryImg src. Ik heb geprobeerd met addClass en removeClass, dus het is bekend om te beginnen, maar het werkt nog steeds niet. Alle hulp op prijs gesteld.









<div id="gallery-next"></div>

<script type="text/javascript">
$(function(){
    $('.galleryImgs').click(function(){
        $('.gallery').show();
        $(this).addClass('catherine');
        var $galleryImg = $(this).attr("data-src");
        $('.galleryImg').fadeIn().attr("src", $galleryImg);
    });
    $('#gallery-next').click(function(){            
        $('.galleryImgs').hasClass('catherine').removeClass('catherine').next('.galleryImgs').addClass('catherine');
        var $galleryImg = $('.galleryImgs').hasClass('catherine').attr("data-src");
        $('.galleryImg').attr("src", $galleryImg);
    });
});
</script>
1
De man heeft zijn opmerking verwijderd. Maar zoals ik al zei, in feite denk ik niet dat een browser de afbeelding herlaadt wanneer de bron wordt gewijzigd, wat de reden is waarom ik zei dat je de manier waarop je schuifregelaar verschuift moet veranderen om door de imags te scrollen die CSS toepassen om uit te faden de oude waardoor het geen wordt en vervaagt in de nieuwe.
toegevoegd de auteur Sammaye, de bron
Correctie, zo hoort het, lijkt erop dat sommige browsers wel haken hebben om te begrijpen
toegevoegd de auteur Sammaye, de bron
data-src is niet hoe het wordt geopend in JQuery, het is $ ('. galleryImgs'). hasClass ('catherine'). data ("src");
toegevoegd de auteur Sammaye, de bron
data-src is een html5 attr en geen aangepaste, jQuery leest deze als de data() globale array: ejohn.org/blog/html-5-data-attributes
toegevoegd de auteur Sammaye, de bron
catherine is een zeer representatieve klasse naam! 1
toegevoegd de auteur Roko C. Buljan, de bron
en nu zijn alle opmerkingen verdwenen ...
toegevoegd de auteur CoreyRS, de bron
hmmm, als dat het geval is, zal ik het coderen op de manier waarop ik het andere deed door de afbeeldingen te verbergen en het kopiëren van de data-src-waarde in te stellen op de src-waarde wanneer erop wordt geklikt en deze vervolgens weer te geven. Bedankt voor de hulp.
toegevoegd de auteur CoreyRS, de bron
data-src is een aangepast kenmerk dat ik heb ingesteld om te voorkomen dat de afbeeldingen worden geladen voordat ze worden aangeroepen. in ieder geval, na wat onderzoek en testen gedaan te hebben, heb ik een bug ontdekt bij het gebruik van hasClass en removeClass samen, wat op dit moment echt een spelbreker is. het uitzoeken van een efficiënte manier om het heen moet interessant zijn.
toegevoegd de auteur CoreyRS, de bron

2 antwoord

Als een hoffelijkheid heb ik je functie herschreven:

$('#gallery-next').click(function(){       
    var el = $('.galleryImgs.catherine');
    if(el.length <= 0){
        console.log('something is really wrong...');
    }   
    el.removeClass('catherine').next('.galleryImgs').addClass('catherine');
    $('.galleryImg').attr("src", $('.galleryImgs.catherine').data('src'));
});

Ik heb dit een beetje bewerkt, neem de nieuwe code als je dat doet.

0
toegevoegd
Ok besefte dat ik nog een fout heb gemaakt. Probeer dat eens.
toegevoegd de auteur Sammaye, de bron
werkt nog steeds niet.
toegevoegd de auteur CoreyRS, de bron
bedankt voor de hulp maar ik heb het opgelost. veel gewaardeerde amigo.
toegevoegd de auteur CoreyRS, de bron

Dit werkte.

$('#gallery-next').click(function(){
        var $galleryImg = $('.galleryImgs.hidden').removeClass('hidden').closest('.galleryImgs').nextAll('.galleryImgs').eq(0).addClass('hidden').attr("data-src");
        $('.galleryImg').fadeIn().attr("src", $galleryImg);
    });
0
toegevoegd
een bug is aanwezig bij het gebruik van hasClass en removeClass samen, dus ik moest een alternatieve methode gebruiken om het object met de gewenste klasse te krijgen.
toegevoegd de auteur CoreyRS, de bron