Hoe return gebruiken in ander script

Status
Niet open voor verdere reacties.
H

helmuteke

Gebruiker
Lid geworden
16 jun 2013
Berichten
10
voor een project heb ik 2 script

een instagram script
en een slideshow script

het instagram script haalt fotos op en retourneert deze als

oproep script
Code: 
div class="test tagsfeed">
			</div>

retour via inspectie element

Code: 
<div class="test tagsfeed">
			<li><img src="http://distilleryimage8.s3.amazonaws.com/8c51f04cd6a211e2b66b22000aa8003c_6.jpg"></li>
                        <li><img src="http://distilleryimage10.s3.amazonaws.com/60e77e54d6a211e2ae2422000ae904d4_6.jpg"></li>
                        <li><img src="http://distilleryimage11.s3.amazonaws.com/53bd64b4d6a211e2978e22000a1fb9d3_6.jpg"></li>
                        <li><img src="http://distilleryimage5.s3.amazonaws.com/4ff07754d6a211e2896922000a1fbe1a_6.jpg"></li>
                        <li><img src="http://distilleryimage2.s3.amazonaws.com/2cbc46aad6a211e2803b22000aaa07e6_6.jpg"></li>
                        <li><img src="http://distilleryimage3.s3.amazonaws.com/06fe778ad6a211e2983d22000a9f199e_6.jpg"></li>
</div>

Het slideshow script zou die li elementen moeten inlezen en deze dan als slideshow tonen
de uitvoer is echter de volledige als 1 element.

Kan iemand me op de juiste weg zetten
 
Hangt een beetje van je slideshow-plugin af hoe die qua instellingen is.

Heb je daar een linkje naartoe?
 
Hoe wordt de data vanaf Instagram opgevraagd?

Als het goed is zou SlidesJS zo moeten werken, alleen de vraag is of de data van Instagram dan al bekend is:

[js]
$(document).ready(function()
{
$(".tagsfeed").slidesjs({
width: 100,
height: 100
});
});
[/js]

Als de data via AJAX opgevraagd wordt zou eerst die data geladen moeten worden en als hij een resultaat heeft de slideshow toegepast moeten worden.
 
Oke en hoe ziet je javascript-aanroep er nu uit? Zorg dat je client_id en access_token niet meekomen ;)
 
Code: 
<html><head>
 
 
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="spectragram.js"></script>
 
 
</head>
<body>
 
 
<script>
$(document).ready(function(){
 
       
               
 
        //Get a list of recently tagged media
        $('.tagsFeed').spectragram('getRecentTagged', {
                query: 'qmusic', //this gets the recent photo feed tagged with the word: converse
                size: 'medium',
                max: 6});
 
        //Set the wrapper HTML tag of the photos
        $('.introPics').spectragram('getRecentTagged', {
                query: 'blokpunt', //this gets the recent photo feed tagged with the word: vans
                max: 4,
                size: 'medium',
                wrapEachWith: '<span></span>'});
});
</script>
 
 
               
                        <div class="test tagsfeed">
                       </div>
               
                       
                       
     
       
</body></html>
 
Als spectagram een beetje modulair is gebouwd kan ik direct doorlussen met de aanroep naar slidesjs:
HTML: 
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="spectragram.js"></script>
    <script type="text/javascript" src="slidesjs.js"></script>
    
    <script>
        $(document).ready(function()
        {
            //Get a list of recently tagged media
            $('#tagsfeed').spectragram('getRecentTagged', {
                query: 'qmusic', //this gets the recent photo feed tagged with the word: converse
                size: 'medium',
                max: 6
            }).slidesjs({
                width: 100,
                height: 100
            });
        });
    </script>
</head>
<body>
    <ul id="tagsfeed"></ul>
</body>
</html>

Je zult slidesjs dus even moeten downloaden en zorgen dat het pad er naar toe goed staat op regel 5.
Verder even de width & height juist instellen.

Als het doorlussen niet werkt kun je dit proberen:
HTML: 
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="spectragram.js"></script>
    <script type="text/javascript" src="slidesjs.js"></script>
    
    <script>
        $(document).ready(function()
        {
            //Get a list of recently tagged media
            $('#tagsfeed').spectragram('getRecentTagged', {
                query: 'qmusic', //this gets the recent photo feed tagged with the word: converse
                size: 'medium',
                max: 6
            });
            $('#tagsfeed').slidesjs({
                width: 100,
                height: 100
            });
        });
    </script>
</head>
<body>
    <ul id="tagsfeed"></ul>
</body>
</html>

Controleer in je inspector even of je foutmeldingen krijgt en zo ja, plaats die dan hier :)
 
bij beiden heb ik nog een <style> tag moeten toevoegen

Bij de eerste versie krijg ik een fout :
Uncaught TypeError: Cannot call method 'slidesjs' of undefined



bij de 2 geen fout maar toont alle 6 fotos onder elkaar , zet ze niet in de slider

versie 2 is te vinden op : http:\\www.helmut.be/test

alvast bedankt voor de hulp
 
Laatst bewerkt:
Hmm, schijnbaar werken de plugins niet samen en heeft spectagram te weinig uitbreidingen om in te haken op het opgevraagde resultaat.
Het enige dat nodig is, is een event dat wordt afgevuurd wanneer hij klaar is met laden.

Een manier waarop ik het voor elkaar heb gekregen is door het initializeren van slidesjs via een knop te regelen die ik pas indruk nadat de foto's er staan.
Maar dat is natuurlijk niet hoe het zou moeten werken.
 
Waarschijnlijk zou het zo moeten werken:
HTML: 
<script type="text/javascript">
    var feed = new Instafeed({
        target: 'tagsfeed',
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID',
        after: function()
        {
            $("#tagsfeed").slidesjs({
                width: 100,
                height: 100
            });
        }
    });
    feed.run();
</script>
<div id="tagsfeed"></div>
De opties target en after van Instafeed zijn in dit geval belangrijk.
Niet vergeten jQuery en slidesjs toe te voegen natuurlijk :)
 
hehe , dit werkt dus :-) ik blij

enkel het juist positioneren lukt niet echt

ik doe :

Code: 
<style>
  
  
  .tagsfeed{
position: absolute;
width: 306px;
height: 306px;
top: 350px;
left: 200px;

}
   </style>
maar dit werkt niet
 
Heb je het ergens online draaien en kun je aangeven hoe het er uit zou moeten zien?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan