asked on

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.

Marisa

ASKER

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,

Rainer Jeschor

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

<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

Marisa

ASKER

Thanks, Rainer. I fixed those three things.

Scott Fell

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)

Scott Fell

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)

Scott Fell

It does look like those images are from your gallery. Try removing those lines or uploading the images and see if it works.

Marisa

ASKER

Hi Scott.
I fixed those 404 issues but it didn't solve the problem.

Scott Fell

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

Marisa

ASKER

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 ?

SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rob

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)

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Marisa

ASKER

Finally something worked! Thank you so much!