I am having trouble running multiple jquery flickr galleries on one web page

[mguise]

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">
        
        <!-- Adding gallery images. This is just a container for the dynamic flickr images -->

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

    // 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="homeone">
    	
        
        
     <div class="content">
        
        <!-- Adding gallery images. This is just a container for the dynamic flickr images -->

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

    // 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'
}
});

    </script>       
        
		</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.

 

[Phreaddee]

because you are calling the same id.
call them #galleria1, #galleria2, #galleria3, galleria4...

 

[PixelPusher]

because you are calling the same id.
call them #galleria1, #galleria2, #galleria3, galleria4...

Ha sometimes it is the simplest things. Id names are unique, there can only be one per page.

 

[JakClark]

Ha sometimes it is the simplest things. Id names are unique, there can only be one per page.

Strictly speaking you can use multiple ID selectors but only when it comes to combining classes with IDs or specifying where the IDs are nested (in CSS) - just to clarify for those who aren't familiar.

 

[mguise]

Thanks everyone for your help.

On the SECOND gallery, I changed '<div id="galleria"></div>' to '<div id="galleria2"></div>' and inside the Javascript snippet below there, I changed the '$('#galleria').galleria' to '$('#galleria2').galleria'.

Such a simple solution...

 

[Phreaddee]

Strictly speaking you can use multiple ID selectors

yes, technically it will work. but it is suggested (and to validate) that ID's are only used once in a document.

in the case of the OP. calling both the same ID would only trigger the first instance of the ID to work, generally speaking it is a good practice to not ever use an ID more than once, even if technically it does work.

 

[JakClark]

yes, technically it will work. but it is suggested (and to validate) that ID's are only used once in a document.

in the case of the OP. calling both the same ID would only trigger the first instance of the ID to work, generally speaking it is a good practice to not ever use an ID more than once, even if technically it does work.

Oh, I know. I was simply stating for those who may be interested. One may take your post literally, although that may not be a bad thing

 

[chrishirst]

Strictly speaking you can use multiple ID selectors but only when it comes to combining classes with IDs or specifying where the IDs are nested (in CSS) - just to clarify for those who aren't familiar.

Clarify "combining classes with IDs" and nested IDs, I'm not sure I see your point on this.