1 reply [Last post]
mathewbguise
Offline
newbie
Packwood, Iowa
Last seen: 8 years 33 weeks ago
Packwood, Iowa
Timezone: GMT-5
Joined: 2012-02-01
Posts: 3
Points: 6

Hi

I am trying to run multiple jquery flickr galleries on one web page but for the life of me I can’t figure out why it will only show me one slideshow instead of two.

I’ve tried different approaches at fixing the problem but I am reaching out to see if anyone else has any ideas that I haven’t thought of.

They are supposed to be stacked, one above the other.

<div id="homeone">
    	
        
        
     <div class="content">
        
        

        <div id="galleria"></div>
    </div>
    

    // Load the classic theme
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');

    // Initialize Galleria
    $('#galleria').galleria({
flickr: 'set:72157630255344406',
transition: 'fade',
      flickrOptions:{    
          size: 'original', 
          description: false, 
          max: 100, 
          sort: 'date-posted-desc'
}
});

           
        
		</div>
      
      
      
      
      
      
      <div id="homeone">
    	
        
        
     <div class="content">
        
        

        <div id="galleria"></div>
    </div>
    

    // Load the classic theme
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');

    // Initialize Galleria
    $('#galleria').galleria({
flickr: 'set:72157630253371152',
transition: 'fade',
      flickrOptions:{    
          size: 'original', 
          description: false, 
          max: 100, 
          sort: 'date-posted-desc'
}
});

           
        
		</div> 

You can see the web page here

http://brianewagnerfund.org/upload.form_test.php

I can’t figure out if it’s the Javascript or the CSS.

Thanks in advance for your help.

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi mathewbguise, id's must be

Hi mathewbguise,
id's must be unique.
try something like:

<div id="homeone">
 
     <div class="content">
 
        <div id="galleria"></div>
    </div>
    <script type="text/javascript">
    // Load the classic theme
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
 
    // Initialize Galleria
    $('#galleria').galleria({
flickr: 'set:72157630255344406',
transition: 'fade',
      flickrOptions:{    
          size: 'original', 
          description: false, 
          max: 100, 
          sort: 'date-posted-desc'
}
});
        </script>
		</div>
 
 
      <div id="hometwo">
 
     <div class="content">
 
        <div id="galleria2"></div>
    </div>
 
 <script type="text/javascript">
    // Load the classic theme
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
 
    // Initialize Galleria
    $('#galleria2').galleria({
flickr: 'set:72157630253371152',
transition: 'fade',
      flickrOptions:{    
          size: 'original', 
          description: false, 
          max: 100, 
          sort: 'date-posted-desc'
}
});
</script>
		</div>