Why can't I get more than one jQuery gallery on one page?

Here is the gallery page.
http://customwovenlabels.com/new/gallery.html

This is the jQuery gallery I'm using.
http://sapegin.github.io/jquery.mosaicflow/

I need to have three different galleries in the tabs you'll see, but only one is showing up. I'm giving them all unique IDs and calling all three up as shown below.
	$('#mycontainer').mosaicflow({
    itemSelector: '.item',
    minItemWidth: 300
});
$('#mycontainer2').mosaicflow({
    itemSelector: '.item',
    minItemWidth: 300
});
$('#mycontainer3').mosaicflow({
    itemSelector: '.item',
    minItemWidth: 300
});

Open in new window



I thought that was all that was required, but I'm not very good with Javascript.
LVL 1
MarisaWeb DesignAsked:
Who is Participating?
 
RobOwner (Aidellio)Commented:
Ok I've found the issue!  The mosaicflow class tries to autoload if you add the mosaicflow class to the containing element so your javascript is ignored (as said on their help page)

An easy fix is to capture the click event of the tab and call the load function of the window.  I'm unsure of the implications outside of the mosaicflow when doing this but there doesn't seem to be any adverse affects: http://output.jsbin.com/qemiba/1

  $('.p7TP_tabs > div').on('click', function(e) {
      $(window).load();
  });

Open in new window

0
 
MarisaWeb DesignAuthor Commented:
Upon further investigation, it seems it only doesn't work when it's inside the second tab. If I put the second gallery in the first tab under the first gallery, it works. But i still do not know why,
0
 
Rainer JeschorCommented:
Hi,
hm that one is really hard, especially as it seems that the plugin is adding a lot of style information onto the page dynamically.
Could you perhaps first try to fix the following three issues:
1. Wrong meta information
Can you please change
<meta name="viewport" content="width=device-width; initial-scale=1.0">

Open in new window

to
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Open in new window

(the semicolon is wrong, it has to be a colon)
2. jQuery file not found
You have two references to jQuery and the
second reference is not found:
<script src="jquery.js" type="text/javascript"></script>

Open in new window

You should only use one jQuery reference / version on a page.
3. Images not found
There is a bunch of about 30 images which cannot be found, e.g.
http://customwovenlabels.com/new/gallery/ultra-imprinted-label-01sm.jpg

Open in new window

Thanks and HTH
Rainer
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
MarisaWeb DesignAuthor Commented:
Thanks, Rainer. I fixed those three things.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There are some missing files.  Are any of those from the gallery?

ailed to load resource: the server responded with a status of 404 (Not Found)
http://customwovenlabels.com/new/gallery/ultra-imprinted-label-05sm.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://customwovenlabels.com/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
These 2...

http://customwovenlabels.com/new/gallery/printed-label-05sm.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://customwovenlabels.com/new/gallery/ultra-imprinted-label-05sm.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It does look like those images are from  your gallery.   Try removing those lines or uploading the images and see if it works.
0
 
MarisaWeb DesignAuthor Commented:
Hi Scott.
I fixed those 404 issues but it didn't solve the problem.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you remove the js and css for the tabs so you have the 3 galleries on the same page on the initial page load does it work?  I'm wondering if you have to add to your js that opens and closes the tabs.

It does look like you can have multiple galleries on a page.  
http://jsbin.com/vevemugapi/1/
<!DOCTYPE html>
<html>
<head>
  <style> .mosaicflow__column { float:left; } .mosaicflow__item img { display:block; width:100%; height:auto; } </style>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://jsbin.com/gapusutexi/1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<div id="two">
  <div class="clearfix mosaicflow"> 
    <div class="mosaicflow__item"> 
      <img width="500" height="300" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Tuscan_Landscape_6.JPG" alt=""> 
   </div> 
   <div class="mosaicflow__item"> 
    <img width="500" height="500" src="http://static.pexels.com/wp-content/uploads/2014/06/landscape-nature-snow-1127.jpg" alt="">     </div> 
 </div>
</div>
  
<div id="one">
   <div class="clearfix mosaicflow"> 
     <div class="mosaicflow__item"> 
       <img width="500" height="300" src="http://upload.wikimedia.org/wikipedia/commons/4/4d/Beautiful_landscape.JPG" alt=""> 
     </div> 
     <div class="mosaicflow__item"> 
       <img width="500" height="500" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Beautiful_landscape.JPG/800px-Beautiful_landscape.JPG" alt=""> 
     </div> 
  </div>
</div>
</body>
</html>

Open in new window

Just to make it easy, I have another set up using tabs via bootstrap and it does not work http://jsbin.com/vevemugapi/2/
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <style> .mosaicflow__column { float:left; } .mosaicflow__item img { display:block; width:100%; height:auto; } </style>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://jsbin.com/gapusutexi/1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#one" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#two" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

  </ul> 
  
  
<!-- Tab panes -->
<div class="tab-content">  
  
<div role="tabpanel" class="tab-pane active" id="one">
  <div class="clearfix mosaicflow"> 
    <div class="mosaicflow__item"> 
      <img width="500" height="300" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Tuscan_Landscape_6.JPG" alt=""> 
   </div> 
   <div class="mosaicflow__item"> 
    <img width="500" height="500" src="http://static.pexels.com/wp-content/uploads/2014/06/landscape-nature-snow-1127.jpg" alt="">     </div> 
 </div>
</div>
  
<div role="tabpanel" class="tab-pane" id="two">
   <div class="clearfix mosaicflow"> 
     <div class="mosaicflow__item"> 
       <img width="500" height="300" src="http://upload.wikimedia.org/wikipedia/commons/4/4d/Beautiful_landscape.JPG" alt=""> 
     </div> 
     <div class="mosaicflow__item"> 
       <img width="500" height="500" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Beautiful_landscape.JPG/800px-Beautiful_landscape.JPG" alt=""> 
     </div> 
  </div>
</div>

  </div>  
</body>
</html>

Open in new window


I think in the click event, you will need to hit the gallery
0
 
MarisaWeb DesignAuthor Commented:
Yes, without the tabs it works. Even when I don't remove any of the tab code and I put all three galleries in the first tab, it works.

What do you mean in click event, I will need to hit the gallery ?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I couldn't get it to work either.  I was able to get jquery masonry to work though. http://masonry.desandro.com/options.html

In bootstrap I looked for the tab being opened,   $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { then initialized the 2nd tab.  You can get the tab id and initialize each tab content.  This is just a quick working experiment.


http://jsbin.com/vevemugapi/4/
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  
   <script src="http://output.jsbin.com/pukojiruci/1.js"></script>

  
    <script> 
    $(function(){
   var $container = $('#m1');
     // initialize
      $container.masonry({
       columnWidth: 100,
       itemSelector: '.item'
     });
         
      
    });
   
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   var $container2 = $('#m2');
     // initialize
      $container2.masonry({
       columnWidth: 100,
       itemSelector: '.item'
     });

});
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#one" aria-controls="home" role="tab" data-toggle="tab">one</a></li>
    <li role="presentation"><a href="#two" aria-controls="profile" role="tab" data-toggle="tab">two</a></li>

  </ul> 
  
  
<!-- Tab panes -->
<div class="tab-content">  
  
<div role="tabpanel" class="tab-pane active" id="one">
 
  
<div id="m1" class="masonry" >
  <div class="grid-sizer"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item w3"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h3"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

</div>
  
<div role="tabpanel" class="tab-pane" id="two">

  <div id="m2" class="masonry">
  <div class="grid-sizer"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item w3"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h3"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

</div>

  </div>  
</body>
</html>

Open in new window

0
 
RobOwner (Aidellio)Commented:
This is due to that projectseven tabs moving the content around in your page as your viewing the tabs.  I couldn't find it but you need to be able to capture the event of changing tabs and then initialise your gallery: http://jsbin.com/qemiba/1/edit?html,js (this was the closest i got)
0
 
MarisaWeb DesignAuthor Commented:
Finally something worked! Thank you so much!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.