[JS] Foto's inladen in slideshow mbv javaScript werkt niet

[Storm90]

Beste Tweakers,

Op *snip* staat een slideshow, waarin de foto's van Flickr moeten worden weergegeven. En zoals je zelf misschien wel kunt zien, werkt het niet zoals het hoort. Het enigste wat ik weet, is dat het probleem is ontstaan sinds ik de foto's mbv javascript probeer in te laden. Hoe ik het probleem moet oplossen is mij een raadsel! Ik kan geen oplossing op internet vinden en dus vraag ik het aan jullie.

Het gaat om de volgende jQuery slideshow plugin: http://www.awkwardgroup.c...showcase-a-jquery-plugin/
Het is een standaard template die wordt gebruikt op *snip*en in eerste instantie werden er foto's van geplaatste artikelen mbv PHP ingeladen, met de volgende code:

code:

<?php query_posts(array('post_type'=>'featured','posts_per_page' => '18'));?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post();
$large = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail');?>
<div>       
    <div class="thetitle"><?php the_title();?></div>
        <a href="<?php the_permalink();?>"><img src="<?php echo $large[0]; ?>" alt="<?php the_title();?>" /></a>    
    <div class="showcase-thumbnail">
        <img src="<?php echo $thumbnail[0]; ?>" alt="<?php the_title();?>"/>    
    <div class="showcase-thumbnail-cover"></div>
    </div></div>
<?php endwhile;?>
<?php wp_reset_query();?>

Nu de klant vroeg of ik met de slideshow de foto's van Flickr kon laten zien ipv die van de artikelen, heb ik bovenstaande code vervangen door onderstaande:

code:

<script type="text/javascript">

        // Our very special jQuery JSON fucntion call to Flickr, gets details
        // of the most recent 20 images

        jQuery.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?", displayImages);

        function displayImages(data) {

            // Start putting together the HTML string
            var htmlString = "";

            // Now start cycling through our array of Flickr photo details
            jQuery.each(data.items, function(i,item){

                // I only want the ickle square thumbnails
                var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
                var bigImage = (item.media.m).replace("_m.jpg", "_m.jpg");

                // Here's where we piece together the HTML
                htmlString += '<div><div class="thetitle">' + item.title + '</div>';
                htmlString += '<a href="' + item.link + '"><img src="' + bigImage + '" alt="' + item.title + '" /></a>';
                htmlString += '<div class="showcase-thumbnail">';
                htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" />';
                htmlString += '<div class="showcase-thumbnail-cover"></div>';
                htmlString += '</div></div>';

            });

            // Pop our HTML in the #images DIV
            jQuery('#showcase').html(htmlString);
            // Close down the JSON function call
        }
        </script>

De bovenstaande code plaatst exact dezelfde html code, op de links en titels na (dat zijn nu links en titels van de foto's van Flickr, natuurlijk). Maar toch werkt de slideshow niet. Ik heb de code ook eens in de header proberen te plaatsen, boven het stukje code wat van de divs een slideshow maakt, maar dat wil ook niet werken. Het geeft hetzelfde resultaat.

Zodra ik de code (die door bovenstaand script gegenereerd wordt) in een alert box weergeef op de pagina, die vervolgens kopieer en letterlijk plak in de index.php file, dan werkt het wel. Met de gegenereerde html code is dus niets mis. Weten jullie wat het probleem is?

[ Voor 0% gewijzigd door Creepy op 31-08-2011 23:08 ]

[Noork]

Geeft Firebug nog nuttige info? Zijn er b.v. wel requests naar Flickr?
Ik heb het idee dat je nog e.e.a. kan debuggen met de juiste tooling.

[Beatboxx]

Het duurt bij mij uren voordat alles laadt? (120Mbit/s internet)

[martin149]

Fout: jQuery("#showcase").awShowcase is not a function
Bronbestand:*snip*
Regel: 41

[ Voor 18% gewijzigd door Creepy op 31-08-2011 23:08 ]

[Beatboxx]

Dit is wat chrome eruit poept:

code:

Unsafe JavaScript attempt to access frame with URL*snip* from frame with URL http://www.youtube.com/embed/2WCt3WryS5U?rel=0&&autoplay=1;hd=1. Domains, protocols and ports must match.
wrapper.pngFailed to load resource: the server responded with a status of 404 (Not Found)

[ Voor 5% gewijzigd door Creepy op 31-08-2011 23:10 ]

[Noork]

Mis je niet gewoon de showcase div?

[martin149]

Nee, hij heeft de div.

Er zijn waarsch 2 javascripts in conflict. Maar de TS mag ook wel eens wat laten horen.

[Creepy]

Javascript hoort in Webdesign, Markup & Clientside Scripting en niet in Programming zoals staat beschreven in Waar hoort mijn topic?. Dus ik heb dit topic net verplaatst.

Los daarvan is "werkt niet" een nogal onduidelijke melding. Ook heb je niet aangegeven wat je nu zelf al hebt gedaan om het probleem op te lossen. Programmeren is meer dan alleen copy-pasten van code van anderen Los daarvan heb ik het topic ontdaan van alle links naar je site toe. Die voegen echt niks toe aan het topic als je tenminste in staat bent om een klein stukje reproduceerbaar te maken. Nu komt het over alsof wij voor hou moeten gaan debuggen, en dat zul je in eerste instantie toch echt zelf moeten doen.

[ Voor 29% gewijzigd door Creepy op 31-08-2011 23:12 ]

[Storm90]

code:

Geeft Firebug nog nuttige info? Zijn er b.v. wel requests naar Flickr?
Ik heb het idee dat je nog e.e.a. kan debuggen met de juiste tooling.

Ja die zijn er, anders zouden er geen foto's van Flickr op de webpagina worden getoond. Heb die code meerdere malen doorgespit maar ik zie daar geen fouten in. Firebug zelf geeft geen nuttige info verder.

Fout: jQuery("#showcase").awShowcase is not a function
Bronbestand:*snip*
Regel: 41

Deze foutmelding is inmiddels verholpen. Maar de slideshow werkt helaas nog steeds niet.

@Beatbox. Ik had al eens de youtube player weggehaalt, maar dat hielp ook niet. En betreft de lage laadsnelheid van de website. Ik heb thuis 60Mbit/s en op elke computer laad de website gewoon snel. Ook nadat ik de cache heb geleegd. Erg vreemd.... Meer mensen hier last van?

Ben nog steeds aan het zoeken naar de fout. Heb de jQuery.noConflict al eens uitgeprobeerd of dat helpt, maar dat maakt ook niets uit. Firebug geeft wel steeds de volgende foutmelding:

code:

container.children is not a function
displayAnchors(container="", fadeOut=undefined)jquery...case.js (regel 475)
awShowcase(options=Object { width=500, height=312, auto=true, meer...})jquery...case.js (regel 819)
(?)()wrapper.png (regel 75)
noConflict()jquery.min.js (regel 26)
inArray()jquery.min.js (regel 33)
[Afbreken op deze fout] container.children('a.showcase-tooltip').each(function()

Heb al gekeken of ik een stuk html mis, maar dat is niet het geval. Toen ik de PHP code nog gebruikte, kreeg ik geen foutmeldingen. Heb ook al verschillende javascript functies proberen uit te schakelen, maar nog geen oplossing gevonden.

Javascript hoort in Webdesign, Markup & Clientside Scripting en niet in Programming zoals staat beschreven in Waar hoort mijn topic?. Dus ik heb dit topic net verplaatst.

Los daarvan is "werkt niet" een nogal onduidelijke melding. Ook heb je niet aangegeven wat je nu zelf al hebt gedaan om het probleem op te lossen. Programmeren is meer dan alleen copy-pasten van code van anderen Los daarvan heb ik het topic ontdaan van alle links naar je site toe. Die voegen echt niks toe aan het topic als je tenminste in staat bent om een klein stukje reproduceerbaar te maken. Nu komt het over alsof wij voor hou moeten gaan debuggen, en dat zul je in eerste instantie toch echt zelf moeten doen.

Sorry, heb ik toch niet goed gekeken voordat ik dit topic plaatste. Bedankt voor het verplaatsen van dit topic . Zal proberen de volgende keer duidelijker te beschrijven wat ik zelf al geprobeerd heb om het probleem op te lossen.

EDIT: Nu werkt de slideshow af en toe. Als ik de pagina een aantal keer refresh, werkt de slideshow. Maar dat is dus niet altijd, als ik de pagina vervolgens nogmaals refresh, werkt de slideshow niet meer. Het lijkt wel dat het te maken heeft met de laadsnelheid van bepaalde scripts, is dat mogelijk? Ik probeer ondertussen een aantal scripts uit te laten voeren met een vertraging (setTimeout).

EDIT2: Heb het probleem gevonden. Ik heb een setTimeout toegevoegd aan de functie die de slideshow als het ware "creëert". Vreemd genoeg werkt het nu wel. Ik vind het vreemd, omdat deze functie sowieso al als laatste werd uitgevoerd. Is het mogelijk dat die functie al wordt uitgevoerd als een vorige functie nog niet volledig is doorgevoerd?

Als iemand een andere oplossing weet dan een setTimeout, laat het alsjeblieft weten . Het ziet er nu namelijk wat slordig uit vind ik zelf, bij het laden van de pagina. Je ziet namelijk eerst alle foto's verschijnen en pas nadat de pagina volledig is geladen, worden deze foto's in een slideshow gestopt. Een kortere vertraging instellen werkt niet, omdat het laden van de pagina dan vaker mislukt.

[ Voor 37% gewijzigd door Storm90 op 01-09-2011 01:05 ]

[R4gnax]

Storm90 schreef op donderdag 01 september 2011 @ 00:05:

Als iemand een andere oplossing weet dan een setTimeout, laat het alsjeblieft weten.

JavaScript:

( function ( $ ) {
  $( document ).ready( function () {
    // Hier je code plaatsen
  });
})( jQuery );

Ben er 99% van overtuigd dat je de DOM probeert te manipuleren terwijl het document nog niet klaar is met inladen. Plaats je initialisatie code eens zoals aangegeven...

[Storm90]

R4gnax schreef op donderdag 01 september 2011 @ 08:55:
[...]

JavaScript:

( function ( $ ) {
  $( document ).ready( function () {
    // Hier je code plaatsen
  });
})( jQuery );

Ben er 99% van overtuigd dat je de DOM probeert te manipuleren terwijl het document nog niet klaar is met inladen. Plaats je initialisatie code eens zoals aangegeven...

Helaas dat wil niet werken... Dit is de code die de slideshow creëert.

JavaScript:

<script type="text/javascript">
$(document).ready(function()
{
    setTimeout(function(){
    $("#showcase").awShowcase(
    {
        width:                      500,
            height:                 312,
            auto:                   true,
            interval:               5000,
            continuous:             true,
            loading:                true,
            tooltip_width:          200,
            tooltip_icon_width:     32,
            tooltip_icon_height:    32,
            tooltip_offsetx:        18,
            tooltip_offsety:        0,
            arrows:                 true,
            buttons:                false,
            btn_numbers:            false,
            keybord_keys:           false,
            mousetrace:             false,
            pauseonover:            false,
            transition:             'hslide', /* vslide/hslide/fade */
            transition_speed:       500,
            show_caption:           'onload', /* onload/onhover/show */
            thumbnails:             true,
            thumbnails_position:    'outside-first', /* outside-last/outside-first/inside-last/inside-first */
            thumbnails_direction:   'vertical', /* vertical/horizontal */
            thumbnails_slidex:      0 /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */    
                    });
    },500);
});
</script>

Ik heb zojuist geprobeerd de setTimeout weg te halen en jouw "function" om de (document).ready te plaatsen, maar dat wil helaas niet werken. Dan werkt de slideshow namelijk helemaal niet meer....

[OkkE]

Het lijkt me handig dat je even een testcase online zet waar alleen die slideshow op staat en die hier post.

[Storm90]

OkkE schreef op donderdag 01 september 2011 @ 13:07:
Het lijkt me handig dat je even een testcase online zet waar alleen die slideshow op staat en die hier post.

http://boemelaer.only-media.nl/slideshow/

Alsjeblieft

[Kajel]

Ik krijg in Chrome Dev Tools gewoon een javascript foutmelding, die je al een stuk verder zou moeten kunnen helpen. Je mag zelf kijken welke

[Styxxy]

Je haalt alle gegevens op in de HEAD én je probeert die in de slideshow te steken. Waarschijnlijk is dat allemaal al verwerkt vooraleer je DOM daadwerkelijk volledig geladen is (en probeer je dus gegevens in onbekende elementen te steken => werkt niet).

Roep die "special json function" aan bij document ready.

[Storm90]

@Kajel, ik krijg alleen een foutmelding dat één afbeelding niet kon worden ingeladen. Dat komt omdat deze wel in de css wordt aangeroepen maar ik heb deze niet overgekopieerd naar de testomgeving.

Roep die "special json function" aan bij document ready.

Dat werkt helaas ook niet. Wat me opvalt is dat, wanneer ik de setTimeout weghaal en de slideshow niet werkt, de browsers de onderstaande functie niet herkennen:

JavaScript:

$("#showcase").awShowcase(

Bovenstaande functie zorgt ervoor dat er van de html code een slideshow wordt gemaakt. Zie mijn vorige post. Het lijkt erop dat de functie wordt aangeroepen vóórdat jquery.aw-showcase.js volledig is uitgevoerd, zou dat kunnen kloppen? Best wel vreemd eigenlijk, want ik heb al een (document).ready om de code heen geplaatst.

[Acid_Burn]

Ik heb het idee dat die json functie asymmetrisch werkt. Dus die is nog bezig om zijn data op te halen als je de showcase wilt starten.

Mijn idee is dat je die

code:

$("#showcase").awShowcase(...

moet zetten in je displayImages functie. Dat is je callback dus dan weet je ook zeker dat de html code die je nodig hebt in de #showcase gezet is.

[Storm90]

Acid_Burn schreef op donderdag 01 september 2011 @ 15:28:
Ik heb het idee dat die json functie asymmetrisch werkt. Dus die is nog bezig om zijn data op te halen als je de showcase wilt starten.

Mijn idee is dat je die

code:

$("#showcase").awShowcase(...

moet zetten in je displayImages functie. Dat is je callback dus dan weet je ook zeker dat de html code die je nodig hebt in de #showcase gezet is.

Een callback, dat is wat ik nodig heb! Ik was al aan het zoeken op onComplete e.d. Heb veel te weinig ervaring met javaScript. Ik weet ook niet hoe ik zoiets aanroep, maar ben al aan het googelen. Nog bedankt voor je reactie! Ik laat zsm weten of het gelukt is.

EDIT: Nou, het heeft even geduurd, maar het is me gelukt! Zie hieronder de code:

JavaScript:

<script type="text/javascript">
        $(document).ready(function(){
        // Our very special jQuery JSON fucntion call to Flickr, gets details
        // of the most recent 20 images
        function callback() {
            $("#showcase").awShowcase({
                    width:          500,
                    height:         312,
                    auto:           true,
                    interval:       5000,
                    continuous:     true,
                    loading:        true,
                    tooltip_width:      200,
                    tooltip_icon_width: 32,
                    tooltip_icon_height:    32,
                    tooltip_offsetx:    18,
                    tooltip_offsety:    0,
                    arrows:         true,
                    buttons:        false,
                    btn_numbers:        false,
                    keybord_keys:       false,
                    mousetrace:     false,
                    pauseonover:        false,
                    transition:     'hslide', /* vslide/hslide/fade */
                    transition_speed:   500,
                    show_caption:       'onload', /* onload/onhover/show */
                    thumbnails:     true,
                    thumbnails_position:    'outside-first', /* outside-last/outside-first/inside-last/inside-first */
                    thumbnails_direction:   'vertical', /* vertical/horizontal */
                    thumbnails_slidex:  0 /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
            });
        }
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=66790267@N03&lang=en-us&format=json&jsoncallback=?", displayImages);

            function displayImages(data){

                // Start putting together the HTML string
                var htmlString = "";

                // Now start cycling through our array of Flickr photo details
                $.each(data.items, function(i,item){

                    // I only want the ickle square thumbnails
                    var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
                    var bigImage = (item.media.m).replace("_m.jpg", "_b.jpg");

                    // Here's where we piece together the HTML
                    htmlString += '<div><div class="thetitle">' + item.title + '</div>';
                    htmlString += '<a target="_blank" href="' + item.link + '"><img width="500px" src="' + bigImage + '" alt="' + item.title + '" /></a>';
                    htmlString += '<div class="showcase-thumbnail">';
                    htmlString += '<img width="80px" src="' + sourceSquare + '" alt="' + item.title + '" />';
                    htmlString += '<div class="showcase-thumbnail-cover"></div>';
                    htmlString += '</div></div>';

                });

                // Pop our HTML in the #images DIV
                $('#showcase').html(htmlString);

                // callback functie aanroepen
                if(typeof(callback)==='function'){
                    callback.call(this);
                }

            }
        });
        </script>

Nogmaals bedankt voor al jullie hulp

[ Voor 69% gewijzigd door Storm90 op 01-09-2011 16:52 ]

[R4gnax]

Storm90 schreef op donderdag 01 september 2011 @ 15:42:

JavaScript:

htmlString += '<div><div class="thetitle">' + item.title + '</div>';

Hey, wat leuk: een potentiële XSS exploit met behulp van de titel van één v/d foto's op Flickr.

Dat soort zaken kun je voorkomen door jQuery netjes alle attributen en inner text die van variablen afkomstig zijn te laten encoden:

JavaScript:

var $template = $([
  '<div>',
    '<div class="thetitle"></div>',
    '<a target="_blank"><img width="500px" /></a>',
    '<div class="showcase-thumbnail">',
      '<img width="80px" />',
      '<div class="showcase-thumbnail-cover"></div>',
    '</div>',
  '</div>'
].join(""));

var $items = $( $.map( data.items, function( item, i ) {
  var $item = $template.clone(),
    sourceSquare = ( item.media.m ).replace( "_m.jpg", "_s.jpg" ),
    bigImage = ( item.media.m ).replace( "_m.jpg", "_b.jpg" );

  $item.find( ".thetitle" ).text( item.title );
  $item.find( "a" ).attr( "href", item.link );
  $item.find( "a > img").attr({ "src" : bigImage, "alt" : item.title });
  $item.find( ".showcase-thumbnail > img" ).attr({ "src" : sourceSquare, "alt" : item.title });

  return $item[0];
}));

$( "#showcase" ).append( $items );