Mosaic – Sliding Boxes and Captions jQuery Plugin

Sam Dunn Author Editor

I’ve noticed a scope issue for using mosaic on multiple versions of the same class – I will be updating this in the next 24 hours if this affects you.

March 16, 2011 · Reply

Javi Santos Author Editor
Waiting! Great Job!

March 17, 2011 · Reply
Mike Ballan Author Editor
I’m trying to have at least 10 mosaic boxes on my website but if you rollover one boxe they all overlay, any ideas what im doing wrong..?

March 17, 2011 · Reply
- Sam Dunn Author Editor
  Mike I noted this problem I will be pushing out an update shortly, thanks!
  
  March 17, 2011 ·
Sam Dunn Author Editor
I just released 1.0.1 which fixes this problem and allows you to specify the overlay and backdrop elements from within the options.

March 17, 2011 · Reply
- Mike Ballan Author Editor
  You are a star..!
  
  I’ll be using this on my tumblr very soon..!
  
  March 18, 2011 ·
- mark cantos Author Editor
  thanks for sharing a beautiful one.
  
  June 3, 2012 ·
Roland Author Editor
Hey Sam, I absolutely love this plugin! You’re a superstar!
My question is that is it possible to modify it so when I load the page the panel is already open and there is a “hide” button in the corner which makes it slide out but not completely so it can be opened again?

April 7, 2013 · Reply

Dustin Author Editor

Nice work Sam, I think you’ve just inspired me to use this on my personal site build.

March 16, 2011 · Reply

Kaspars Author Editor

This is useful, thanks!

March 17, 2011 · Reply

Nathalie Author Editor

Really nice work! : D I did not know I was looking for a plugin like this but now can not my head stop creating ideas where I can use it. Thanks.

March 17, 2011 · Reply

e11world Author Editor

Pretty useful script and a great looking demo. You are the man Sam! Keep it up!

March 17, 2011 · Reply

Chris Poblete Author Editor

I keep getting that wretched “The plugin does not have a valid header.” error…

March 18, 2011 · Reply

Sam Dunn Author Editor
This is not a WordPress plugin – it’s jQuery which means you need to apply it within the scripts and markup directly.

March 18, 2011 · Reply
- Chris Poblete Author Editor
  Ohhh okay thanks. Very helpful. Sorry, I’m new to this!
  
  March 18, 2011 ·

Jack Author Editor

Hello. Great job with this!
This might be what my client is looking for. Is it OK if I use this so, that I get paid for implementing it into the code, but not for the plugin? If I understood the MIT license right, it should be OK, but I just want to know if you accept it :).

March 19, 2011 · Reply

Sam Dunn Author Editor
You got it, that’s entirely allowed.

March 20, 2011 · Reply

Sam Grimsley Author Editor

Hey Sam,

Great code thanks very much for sharing it, just a quick question with regards to an earlier post. Have you released an update to fix the overlay issue when using multiple boxes with the same classes?

Many Thanks
Sam

March 21, 2011 · Reply

Sam Dunn Author Editor
Sam,

yessir, that’s all taken care of!

March 21, 2011 · Reply
- Sam Grimsley Author Editor
  That’s awesome thanks Sam
  
  March 22, 2011 ·

Nootilus Author Editor

Hello,
Nice plugin, very easy to understand and implement. That’s a nice tool for webdesigner with weak knowledge in coding like myself :)

Just a question/suggestion. Could it be possible to make the slider/fade reacts on a mouse click instead of a rollover?
I guess it’s not a big trick but for what I’m needing this plugin, I can’t use the hover action.

Thanks again to share this!

March 24, 2011 · Reply

Charles Law Author Editor

Hi for bar2 is it possible to make it so that when I hover over the image the overlay link looks like it is moused over and the entire box is also clickable?

Thanks!

March 27, 2011 · Reply

soon Author Editor

HTML-Code doesn’t validate. Foe example it is not allowed to link a div container. In addition, if JavaScript is deactived, only the progress.gif is shown an not the thumbs. Please fix it.

March 28, 2011 · Reply

Jordan Author Editor
If you are proficient in HTML and CSS, you can fix it. Basically, you can’t put any block elements within the tags. You have to ditch the ‘details’ div and use span tags for styling. Then you must add padding to the animation div to space it properly. Something like this:

your content

then…

.bar .mosaic-overlay {
bottom:-162px;
height:122px;
width:302px;
background:url(../img/bg-black.png);
padding:15px 20px;
}

March 30, 2011 · Reply
- Jordan Author Editor
  Note: The link that says “your content” got parsed by the comment editor.
  
  Supposed to look like this, just add the
  a href=”#” class=”mosaic-overlay”>
  span>your content /span>
  /a>
  div class=”mosaic-backdrop”>img src=”" />/div>
  /div>
  
  March 30, 2011 ·
- Marcin Ciesielski Author Editor
  Hey
  
  Is there available version of mosaic corrected for deactivated javascript?
  
  So far I load mosaic.css with javascript too, so it won’t get loaded and page should not get stuck with progress gif.
  
  Cheers
  Marcin
  
  May 2, 2011 ·
- cougar Author Editor
  but you still cant use h2 or p tags inside as it wont validate. so what to do
  
  July 4, 2012 ·

Ben Clarke Author Editor

Im having some trouble, getting multiple images working i can get one initial image working with the Mosaic Block Bar, version but when i copy and paste this part of the code

Bla Bla
By Blar ar

it doesnt display a second box any help would be appreciated and the rest of the plugin is great!

March 29, 2011 · Reply

Ben Clarke Author Editor
div class=”mosaic-block bar”>
a h r e f=”#” target=”_blank” class=”mosaic-overlay”>
div class=”details”>
h4>Bla Bla
p>By Blar ar
/div>
/a>
div class=”mosaic-backdrop”>
/div>
div class=”clearfix”>

March 29, 2011 · Reply
- Nicole Author Editor
  Hi Ben — you have probably figured this out by now — but I think its because you still have the demo css code in your html file. HTH.
  
  April 24, 2013 ·

Peter Author Editor

I’ve linked my thumbnails. If i click the thumbnail and then go back in my browser (firefox) sometimes the caption stays ‘active’. In Chrome/Safari no problems… Any idea’s?

March 29, 2011 · Reply

Charles Author Editor

anyone noticed that there is a bug on mobile safari? if you click on an item then go back the item is still in its active state for me.

March 30, 2011 · Reply

Ed Author Editor
I noticed this as well. Any fixes?

June 30, 2012 · Reply

Christian Author Editor

First of all, I really like this plug-in! But it seems I can’t use it for my purposes, unless…

1) Is it possible to put links in the details paragraph? I can’t, because the whole div is already nested inside an “a” tag. I would like to use the sliding in part as a menu with multiple linked items on it.

2) Is it possible to slide just up just as much as necessary to show the content of the slider? In my example, if I have one box with five links in it, and another one with only one link, I would like them to slide up to different amounts. I do realize that I could just make classes like .slide5 and .slide1 respectively, but if jQuery has a smarter way to do it, I am all ears. ;)

3) On the current version of Chrome on Windows, the plugin seems to have a bug when used with more than 9 boxes. From box 10 on, some will slide in, but not out again, and some won’t do anything at all. The code validates and it works fine in FF4 and IE9.

March 31, 2011 · Reply

Christian Author Editor
1) I sorted this by using the older (non-plugin) version of the script. It works fine with that.

2) I solved this via a counter and the classes that slide to various amounts.

3) This might be helpful for some.. Chrome *needs* a “clear:both” div when you start a new row of boxes. If you just keep on adding floating boxes inside a container div that will eventually cause a line break, the sliders further down the page (scrolling) will not work.

April 1, 2011 · Reply
- Charles Author Editor
  where do you put the clear:both? thanks
  
  April 6, 2011 ·
- Patrick Author Editor
  How did you adjust how high the overlay slides up?
  
  January 25, 2012 ·
- dettlee Author Editor
  does any one know where to get the non plugins version ?( older )
  
  November 20, 2012 ·

Tom Author Editor

Hi,

First of all, thanks for the great work, the plugin works in wonderfull ways,

but i`m having some problems interacting with updatePanel in asp.net, it stop showing the content of the divs (the image it still appear)

have some suggestions for this problem?

Thanks in advance

Thomas Leutz

April 1, 2011 · Reply

Bartek Author Editor
Hi Tom,

Try changing EnablePartialRendering to “False” in your ScriptManager

April 16, 2011 · Reply

dafunkystory Author Editor

Very nice and speed on execution.

April 3, 2011 · Reply

DK Author Editor

Hi Sam, I’ve got the plugin working beautifully on Chrome, thanks – it also implements well on ie8, but I’m having trouble getting it working on ie7 – is it just not compatible this far back, or is there something I’m missing? Hope this isn’t a question you were hoping nobody would ask :)

I’m getting the message ‘An error has occurred in the script on this page.’ Error = Expected identifier, string or number’

April 4, 2011 · Reply

henn1nk Author Editor
Did you solve this problem? Same here.

November 9, 2011 · Reply

fajariady Author Editor

Very Nice, very Usefull.. Thanks…

April 5, 2011 · Reply

trafik sigortası Author Editor

Thanks for this wonderful sharing

April 5, 2011 · Reply

website designer uk Author Editor

It’s really great post.Thanks for shearing it. Great tutorial and techniques well explained.

April 12, 2011 · Reply

Kiki Author Editor

I’ve been trying to merge this plugin with galleryview from http://spaceforaname.com/galleryview to get this example:http://www.forbes.com/2011/03/30/porsche-toyota-bmw-mercedes-business-autos-best-liked-cars_slide_2.html.

The result I wanted is an gallery that let you browse through the images and when you hover over the image, the captions pop up. Galleryview doesn’t have ‘pop-up’ captions and I couldn’t figure out how to make the mosaic plugin work inside the gallery….

help?

April 12, 2011 · Reply

Regnareb Author Editor

When Js is desactivated, there is only the loading animation. Images and link should at least appears.

April 17, 2011 · Reply

Dan Author Editor

I use mosaic to launch a colorbox (http://colorpowered.com/colorbox/) gallery. When i close the gallery the .mosaic-overlay bottom property gets some value that makes both the picture and the caption go up by 50px.
I have experienced this bug with explorer 7 or 8 (i don’t remember which one i’ve used) and safari 5.0.5. Firefox 4 behaves correctly.
Currently i’m fixing this issue using a callback function that assigns a 0px bottom value to .mosaic-overlay when the gallery gets closed.

April 18, 2011 · Reply

Nikki Author Editor
Dan, I’ve got the same problem but can’t figure out how to write the function to fix it. Can you post the whole line out, please? (I’m new to javascript and been trying to figure it out the last two days…)

September 11, 2012 · Reply
Luis Author Editor
hey Dan!

the same here, did u manage to correct that issue? can u please explain how to do it?
I don’t have that much experience in jquery so it’s getting hard these last days to figure this out.. =/ im kinda stuck here..

thanks in advance!

September 19, 2012 · Reply
- Luis Author Editor
  well, I think I solved it for me!
  
  I’m quite a noob in js.. but after analyzing the “jquery.colorbox.js” file and lots of debugging experiments with trial&error commenting out some lines of code to see where was the problem.. I found that by commenting out this code:
  
  // trigger(event_closed, settings.onClosed);
  
  (around line 901 more less in colorbox.js file..)
  
  it solved the problem of the mosaic pic and caption sliding out of the frame..!!
  
  I actually don’t know if it is important to keep that line of code intact, but as far as I can see, it works normally in FF, IE and Chrome.. and it looks that it would just trigger the callback “onClosed” if u needed something to happen after closing the colorbox, which is not the case for me..
  
  Cheers!
  
  September 21, 2012 ·

Level switch Author Editor

Lovely sliders, very effective and they look cool too

April 20, 2011 · Reply

Brian Author Editor

This is an awesome jquery plugins. Love it. But i’m having one problem implementing the code. I’m using the .fade mosaic effect but when i try to duplicate it and replace with other image, the next one doesn’t work. I’ve even duplicate the div class as well.

this one works:
/div class=”mosaic-block fade”
/a href=”http://buildinternet.com/project/mightyicons/” target=”_blank” class=”mosaic-overlay”>
/a>
/div class=”mosaic-backdrop”>
/img src=”images/thumb1jpg” />
/div>
/div>

this one won’t work:
/div class=”mosaic-block2 fade”
/a href=”http://buildinternet.com/project/mightyicons/” target=”_blank” class=”mosaic-overlay2″>
/a>
/div class=”mosaic-backdrop2″>
/img src=”images/thumb2.jpg” />
/div>
/div>

i even duplicate the $(‘.fade’).mosaic(); into $(‘.fade2′).mosaic();

Is there something wrong with the way i’m doing? Appreciate it if someone could teach me on how to duplicate it

April 26, 2011 · Reply

Brian G. Author Editor

Hello,

A client asked me to create this site with modals that each contain a small gallery. I used Colorbox to create the windows and Highslide for the galleries. See link;

http://www.garrigan.net/Furryteeth/

Then he saw an example of Mosaic and wanted it incorporated into the original design. Working from the base html file I got everything to work perfectly locally on my machine. After I uploaded everything to my site to test it out things went very wrong. See link;

http://www.garrigan.net/Nakata/

Everything works until you click on one of the images to launch a gallery. Then the entire site seems to fall to pieces. Any idea what I did wrong or where I can correct my mistake? I am assuming there is a server issue since it works on my machine.

Thanks for any help you can offer.

April 26, 2011 · Reply

Dave T Author Editor
Brian,

I am not an in depth programmer but by the looks of your style sheets your colorbox CSS might be referenced incorrectly

your colorbox directory is in all caps, I dont know if that was on purpose or not.

May 3, 2011 · Reply

Parasar Author Editor

Thanks Sam
for the cool plugin and never ending tutorials : )

April 27, 2011 · Reply

Bratu Sebastian Author Editor

Thanks, the plugin is awesome!

April 28, 2011 · Reply

Dave T Author Editor

Does the order the scripts are executed impact the overall functionality of the plugin?

May 3, 2011 · Reply

Patrice Author Editor

Is there a way to use this wonderful plugin with the Jquery Cycle all??

May 11, 2011 · Reply

Robin Author Editor

Is there any way to reverse the fade-in effect? I want it to be dark at first and then color upon hover.

May 12, 2011 · Reply

Tom Author Editor
have the same question. How can we have the reverse fade effect – title fade out when mouse over.

January 8, 2012 · Reply
- Rono Author Editor
  Hi guys did you managed how to reverse the effect?? I desperately need it:) THANKS!
  
  February 14, 2013 ·

György Klepárj Author Editor

amazing helpful and useful theme, at least for me! thank you!

May 12, 2011 · Reply

Luther Luse Author Editor

Simply need to say the article is impressive. The clearly together with your blog submit is just simply outstanding and I can inform you’re the specialist for this niche. Effectively together with your let me to seize your feed to retain up-to-date with next posts. Many thanks 1,000,000 and kindly continue the strong do the job.

May 18, 2011 · Reply

Schuyler Author Editor

Hey, great plugin!
I was wondering if there is a way to have multiple overlays on a single box element? It doesn’t seem to be working for me. Thanks for the help.

May 19, 2011 · Reply

rik Author Editor

hallo,

first: thank you so much, mosaic rules!

second, my question: i use “fade”. as a hover effect, i’d love to have the details show up (works) AND another image showing up in the background. is that possible, somehow??

i use mosaic on a bigcartel store page for my product overview pages:

May 24, 2011 · Reply

rik Author Editor
this is what i would like to do…
http://www.bonmatin.de/exmpl.jpg

May 25, 2011 · Reply

Bill Author Editor

This is fantastic – a question.. is there anyway to get multiple Divs to ALL animate at the same time when ANY of them are hovered over?

May 25, 2011 · Reply

peter Author Editor

this is awesome thank you for the great job
can you please help me and tell me how can i add this caption feature to lightbox ?
i have a slider and when users click on each picture it opens a lightbox window and there is same picture in full screen . all i need is to show the info for each images ( only in full screen view )
can you help me please ?

May 26, 2011 · Reply

Ian Snook Author Editor
what lightbox did u use to do this? Im trying to get it to open as a lightbox once clicked but the jquery of lightboxs seems to clash with this one, and can only get one or the other working.

September 6, 2012 · Reply
- kim Author Editor
  I had the same problem as @Ian Snook the other day, I ended up going with “Advanced Thickbox” plugin for WordPress but if you are not using WordPress I believe there is a standalone version of Thickbox available.
  
  September 6, 2012 ·

double Author Editor

Hi!
I have a problem, I’m working on wordpress website, and I’m using mosaic plugin(installed manually).
Since I installed “Facebook comments for WordPress” plugin, the mosaic boxes keeps loading(with loading gif animation).
In chrome console, it tells:
“Uncaught TypeError: Object # has no method ‘mosaic’
(anonymous function)/at_work/:58
c.b.extend.readyjquery.js:29
c.u”
Any idea?

May 27, 2011 · Reply

nate Author Editor
@double
same problem… It might be a jquery conflict happening. what does your wordpress script look like? (post it)
Have you implimented the jquery conflict resolution?
I’ve been having trouble adding the sliding boxes not loading correctly.

May 27, 2011 · Reply
- double Author Editor
  Keep getting this problem…. I hope someone post a solution! :)
  
  May 31, 2011 ·

PHP Programmer Author Editor

I think your all information and your tell us about the plugin is very useful and attractive.

May 30, 2011 · Reply

Anthony Author Editor

Hello there, love your work on the mosaic plugin, our developer has added it to our website http://www.bentsquare.com.au

Looks great and works well. One catch. In both Safari and Firefox, when users hover over a box (skis in our case) and select the box, proceed to another page then return to the original page via the back button, the hover box is still illuminated/selected. It does not reset, rather it stays selected when the back button iss used. Any ideas on how this can be fixed? Any help greatly appreciated. Cheers, Ant

June 1, 2011 · Reply

Joseph Author Editor

You guys rock for making this a plugin. And just in general, you rock.

June 3, 2011 · Reply

ocean frieght Author Editor

Thanks for this, fortunately I found this when I need it most.

June 5, 2011 · Reply

Indy Author Editor

Hi!

First, thanks so much for sharing this plugin! It’s beautiful design!

Second, I’m a noob to coding/jquery. I’m trying to use multiple “fade” boxes on one page. Unfortunately, I’m not sure what should change in the code to allow me to position each box independently. As of right now all I am managing to do is stack the boxes on top of each other, lol. Any help, or shooting me to a page that has a functioning example, would be appreciated.

Thanks.

June 6, 2011 · Reply

kieran Author Editor

how do you make an internet

June 6, 2011 · Reply

kieran Author Editor

how can you make a new internet

June 6, 2011 · Reply

Ashley Author Editor

Hey, I’m trying to activate this plugin but I keep getting the error: “This plugin does not have a valid header.”
Any ideas?

June 7, 2011 · Reply

Sam Dunn Author Editor
This is a jQuery plugin, not a WordPress plugin!

June 7, 2011 · Reply

David Angelo Chiapoco Author Editor

Hi Sam,

Im using both Mosaic and Supersize on my personal site (linked).

Im using Mosaic as my menu and was just wondering if it was possible to make the text beneath the sliding boxes be clickable instead of the whole box being the link.

I.e. a user hovers over a box, the picture ‘slides’, and underneath wil lbe two or three URLs, the user then is able to choose between those urls

cheers

June 10, 2011 · Reply

David Angelo Chiapoco Author Editor

*http://www.chiapoco.com/davidangelo

June 10, 2011 · Reply

nate Author Editor

WORDPRESS
*note Sam thank you for this plugin
**note This worked for me and may or may not work for you

Ok, I finally got it to work with my wordpress theme. I have a custom loop, so it may/may not work for you.

1. don’t load though your header
2. We load it though the function.php
3. Make a file called custom-mosaic.js put it in your mosaic js folder
4. Make custom-mosaic.css and put it in your css folder (make css folder if you don’t have one)

Header::
don’t put anything mosaic in here (we load it though the function)

CSS aka custom-mosaic.css :
‘feat-thumb’ is a div on my thumbnails. change accordingly to fit your theme

.mosaic-block .details {
margin: 30px 20px;
}
.mosaic-block h4 {
color: #FFFFFF;
font: 400 18px/120% ‘Helvetica Neue’,Helvetica,Arial,sans-serif;
letter-spacing: -1px;
margin: 0;
text-shadow: 0 0 0 #000000;
text-transform: uppercase;
text-decoration:none;
}
.mosaic-block h5 {
color: #FFFFFF;
font: 400 14px/120% ‘Helvetica Neue’,Helvetica,Arial,sans-serif;
letter-spacing: 0px;
margin: 0;
text-shadow: 0 0 0 #000000;
text-transform: uppercase;
text-decoration:none;
}
.mosaic-block p{ font:300 12px ‘Helvetica Neue’,Helvetica, Arial, sans-serif; color:#aaa; text-shadow:1px 1px 0 rgb(0,0,0);}
.mosaic-block a{ text-decoration:none; }

.mosaic-block {
width:515px;
height:100px;
margin:0px;
border: solid 1px #ccc;
}

.feat-thumb .bar3 .mosaic-overlay {
top:-50px;
height:50px;
background:url(../js/mosaic/img/bg-black.png);
}

.feat-thumb .cover .mosaic-overlay {
left:-515px;
height:100px;
background:url(../js/mosaic/img/bg-black.png);
}

.feat-thumb .cover1 .mosaic-overlay {
left: 515px;
height:100px;
background:url(../js/mosaic/img/bg-black.png);
}

.feat-thumb {
margin: 0 0 4px 0;
height: 100px;
}

.feat-thumb img {
margin: 0;
border: 0;
}

Function::
Loading the script in Function *note ‘crookstheme’ is my theme name

add_action( ‘init’, ‘crookstheme_load_mosaic_style’ );
function crookstheme_load_mosaic_style() {
wp_register_style(‘mosaic.css’, get_bloginfo(‘template_url’) . ‘/js/mosaic/css/mosaic.css’);
wp_enqueue_style(‘mosaic.css’);

wp_register_style(‘custom-mosaic.css’, get_bloginfo(‘template_url’) . ‘/css/custom-mosaic.css’);
wp_enqueue_style(‘custom-mosaic.css’);
}

add_action( ‘init’, ‘crookstheme_load_mosaic_script’ );
function crookstheme_load_mosaic_script() {
wp_register_script(‘mosaic.1.0.1.js’, get_bloginfo(‘template_url’) . ‘/js/mosaic/js/mosaic.1.0.1.js’, array(‘jquery’));
wp_enqueue_script(‘mosaic.1.0.1.js’);

wp_register_script(‘custom-mosaic.js’, get_bloginfo(‘template_url’) . ‘/js/custom-mosaic.js’);
wp_enqueue_script(‘custom-mosaic.js’);
}

Loop or Index::
Notice I only want to use cover… you can put in whatever you want

Latest News

have_posts()) : $recent->the_post();

if (empty($mosaic_classes)) {
$mosaic_classes = array(‘cover’);
}
$mosaic_class_key = array_rand($mosaic_classes, 1);

?>

JS::
this file is called custom-mosaic.js I only chose to load the transitions that I wanted to use. you can choose to load any one that you want to use.

jQuery(document).ready(function(){

jQuery(‘.mosaic-block’).mosaic({
opacity : 1.0
});

jQuery(‘.bar3′).mosaic({
animation : ‘slide’, //fade or slide
anchor_y : ‘top’ //Vertical anchor position
});

jQuery(‘.cover’).mosaic({
animation : ‘slide’, //fade or slide
hover_x : ’0px’ //Horizontal position on hover
});

jQuery(‘.cover1′).mosaic({
animation : ‘slide’, //fade or slide
hover_x : ’0px’ //Horizontal position on hover
});

});

hope this helps
I was going crazy to figure this out… then again I’m not the best jQuery guy.

June 13, 2011 · Reply

nate Author Editor
Oh… make sure you also upload all of the native mosaic files to your theme folder.
custom-mosaic.css and custom-mosaic.js are in addition to the mosaic files they do not replace them.

June 13, 2011 · Reply
cgv Author Editor
Thanks Nate! Been struggling with this as well. Will give this a try!

June 23, 2011 · Reply
Tracy Author Editor
Did you try adding it to the header underneath the call for wp_head()? I am in the middle of creating a new theme and have successfully got it working this way.

November 21, 2011 · Reply
- Chris Author Editor
  Tracy, what did you add to the header?
  
  I’ve tried Nate’s way but it doesn’t work for me :/
  
  February 7, 2012 ·
- kim Author Editor
  Thanks Tracy and Nate! Any help or examples of your work to show off? I have attempted to make Nate’s solution work but nothing has solved my issue. I am attempting to move over an existing HTML page to WordPress template (www.bluechipproductions.ca) and while the mosaic works wonderfully there the same code is not animating this correctly…
  
  July 14, 2012 ·

Anthony Author Editor

HEy!

Thanks for uploading this, it truly is amazing.

I am stuck though, i have managed to get everything working except to the point when you scroll over the thumbnail and the caption pops up for the bottom (i am using bar)

The caption only pops up when you hover over the top 30px or so and not anywhere on the image.

Please could you show me the part of the code where i can change this to please?

I have had 2 nights with no sleep because of this!!!

Thanks.

Anthony

June 15, 2011 · Reply

Developer Author Editor

I like jQuery
Its a good framework

June 20, 2011 · Reply

Madeline Author Editor

Very cool. I like the individual article boxes.

June 21, 2011 · Reply

Heiko Author Editor

Looks cool! Especially combining the bottom and top slide-in effect on two images one above the other makes it quite fancy. So far I mostly worked with text in the image and opacity for the text bar to get this effect but it looks as it loads quite fast… so I’ll give it a try! thx

June 23, 2011 · Reply

RJHBookLinux Author Editor

Fantastic script, I love the results. One thing I’m trying to figure out is, with one image, it’s smooth as can be. When I apply to a gallery with a measly 9 images, safari brings my CPU to it’s knees. Same with Chrome, although the cover slide is still smooth and fast in Chrome (Mac). What’s odd is that it’s not just a spike in CPU when rolling over images…even if the static html page I’m using for testing is open and in the background (i.e. not the front most window) Safari eats up about 80% of my 4GB Memory.

Has anyone experienced similar CPU issues?

June 28, 2011 · Reply

Preston Author Editor

How hard would it be to on initial load of the page fire each event 1 time for each of the images. Gives a clue to users that more happens with the hover event.

I’m attempting to dig through and see if I can make this happen.

June 29, 2011 · Reply

Fig Tree Design Studio Author Editor

Very Cool! Love your work!

July 1, 2011 · Reply

Chandra Author Editor

Your post was really helpful to me and thanks for sharing.

July 5, 2011 · Reply

lxn Author Editor

Hi Sam and thank’s for sharing that’s plugin!
Using this probably i found an error on row 42.
There is a repeated options param ‘base.options.options.animation’ and that generated an error if preload is activated.
is known or am I doing something wrong?

July 11, 2011 · Reply

Ralf Author Editor
change the code to ‘base.options.animation’

June 22, 2012 · Reply

jonty Author Editor

Hi Sam,

I’ve played around with this and it’s really nicely done. It can add alot to a page’s user interface.

It strikes me that this would make an ideal Joomla! plugin (it’s coded in jQuery after all!), any plans to pack it up for Joomla?

Thanks anyway – nice work.

July 11, 2011 · Reply

Kiambati Author Editor
Hey, have you managed to find a way to integrate this in joomla, if so would you mind posting the procedure here.

June 7, 2012 · Reply

Tim Author Editor

Great plugin. Thanks for sharing! I’ve noticed one issue where if a jQuery twitter feed plugin is being used at the same time (I’ve tried several, including Sea of Clouds tweet, Tweetable, etc.), then mosaic doesn’t work in Safari. It seems to work in IE, FF, Chrome, and Opera, though.

July 12, 2011 · Reply

Peter Author Editor

Hi,

First ->Thanks for the nice plugin.
There is still one problem for the ipad. When i’m using for example the slide effect, the slide will work but will not go back of when clicking it again. It’s normal because click = onhover and onhover will stay. one solution is maybe onlick to call the function again to slide back. Don;t know the best solution for it yet.

July 22, 2011 · Reply

erwin Author Editor

hey there

thx for sharing a great plugin :D

i was working om my site and i noticed something while implementing it.
in most tested browsers everything seems fine but in firefox 4 and 3
the
has left -100px instead of 0px… i break my head over this…

if u would be so kind to have a look:
http://ecopinoy.eu/aveeu/Links

thx

July 22, 2011 · Reply

robert Author Editor
hi, i’m having same problem. did you ever find a fix to this?

January 25, 2012 · Reply
- robert Author Editor
  i had the same problem. for me, the issue was that i didn’t realize the difference in the DOCTYPE… i was using strict, and this code was using transitional.
  
  February 5, 2012 ·

erwin Author Editor

seems something wasn’t posted sorry for that
its the mosaic overlay
should start left 0px and bottom -100px
only in firefox it starts with left 100px…
strange ha ?
so the effect on hover becomes a movement up and left instead of just up…
annyway
i hope u know why this happens…

July 23, 2011 · Reply

Dan M. Author Editor

I was having a similar problem.

It’s been awhile since this post, but for others curious about this I simply downloaded and replaced my copy of mosaic.js with the version on this site (even though mine version said it was the latest) and it started working.

Also, instead of renaming mosaic-block, mosaic-overlay, etc… to mosaic-block2, mosaic-overlay2, etc…. change the main class, instead of renaming, like this:

.sun .mosaic-block {
float: right;
position:relative;
overflow:hidden;
width:275px;
height:268px;
margin:0;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.sun .mosaic-backdrop {
display:none;
position:absolute;
top:0;
height:100%;
width:100%;
background:#171717;
}
.sun .mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:100%;
height:100%;
background:#171717;
}

.sun .mosaic-overlay {
opacity:0;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=00)”;
filter:alpha(opacity=00);
background:url(../images/work2-1.png);
}

.sun .mosaic-overlay .details {
font-family: ‘Calibri’, Arial, Helvetica, sans-serif;
color: #fff;
font-size: 13px;
padding: 0;
}

and my header JS is:

$(document).ready(function($){
$(‘.image’).mosaic({
animation : ‘fade’
});

$(‘.sun’).mosaic({
animation : ‘fade’
});
});

July 25, 2011 · Reply

erwin Author Editor

thx for the effort mate but i checked and replaced (to be sure) with the website version to no avail…

i don’t really know what u mean with the second remark…
i think i did not change the css so do you mean i should?

anyway i know for sure (firebug) its the mosaic script setting the value to left:-100px; instead of left:0; but i do not know why…

i use the bar option

July 25, 2011 · Reply

Amit Author Editor

Hey there,

Ive just been trying to to use this plugin on a site im working one. Ive managed to set up everything correctly and it works fine on its own.

I also want to implement the shadowbox jquery plugin in conjunction with mosaic. This is where Im getting problems. I cant seen to get the content to show up in the shadowbox. Is mosaic made to be used on its own?

Thanks
Amit

July 27, 2011 · Reply

Guy Author Editor

You are correct. On line 42, you simply need to change ‘base.options.options.animation’ to ‘base.options.animation’. This should help fix the preloading error. Hope this helps.

July 30, 2011 · Reply

DF Author Editor

Many kudos for this awesome plugin! Absolutely amazing.

I second the duplicate ‘options’ – just remove it 1 time as “Guy” said and preloading is on. However, it will lead to a tiny little problem when the mouse cursor is hovered over the image/div while still loading. Then, the desired animation will still work but the “image” will disappear right after first fade (in Safari & FF on Mac at least).

Other than that the plugin is working flawlessly with more than 20 different object on my site so far. Still under development… happy to post a link when the baby’s going online.

August 15, 2011 · Reply

Justin Author Editor

Hi,

I’m having trouble integrating separate links within the mosaic overlay. Is this possible?

Thanks!

August 25, 2011 · Reply

Will Author Editor

Hello,

I’m having a bit of an issue in Internet Explorer- I am doing a simple overlay fade with the Mosaic, but in IE, it only shows for a second on hover then disappears. Would this have anything to do with me having an older version of the JQuery library(v1.4.2)?

August 29, 2011 · Reply

pjammer Author Editor

Hey,

I needed to scratch an itch, so i whipped up a Rails helper plugin for your jquery plugin. It gives us Ruby on Rails developers the ability to use your plugin within the framework, and create cool looking/acting galleries.

It’s just starting to come together but is useable and I’ll be adding more/better support for other options (i only used bar2 as of today).

Anyways it’s here: https://github.com/pjammer/rails_mosaic_gallery

Enjoy.

September 1, 2011 · Reply

DF Author Editor

@Justin
this is possible! You only need to use a instead of tag as container of the “mosaic-overlay” and then add your links in “details” container as follows:

Mighty Social Icons
Link 1
Link 2

Inside “details” you can play around with additional div tags and/or inline-block elements/styles to let the links appear on the entire space of the overlay; e.g. link1 in the upper and link2 in the lower half. I’m using this with the simple fade only… not sure how it works using the other effects? I assume there’s a similar approach to achieve the same feat. Make sure no “parent” link is overlapping the “child” links (no valid HTML!!!) while maintaining the hierarchy of the mosaic classes.

September 7, 2011 · Reply

DF Author Editor

Oh man… my bad!

You only need to use a “div” instead of “a” tag as container of the “mosaic-overlay” and then add your links in “details” container as follows:

div class=”mosaic-block fade”>
div class=”mosaic-overlay”>
div class=”details”>
h4>Mighty Social Icons /h4>
p> a href=” … “> Link 1 /a> /p>
p> a href=” … “> Link 2 /a> /p>
/div>
/div>
div class=”mosaic-backdrop”> img src=” … “/> /div>
/div>

September 7, 2011 · Reply

tastebud Author Editor

Great Plugin!

I am using it on my webpage http://tantalizing-tastebuds.com/being-a-vegetarian/.

I have one question on customization. I would like various posts from a particular category to be shown in these boxes i.e each box has content from a particular category and it keeps showing different posts at intervals. Is this possible? and if so how can i customize it to achieve it?

I have seen that effect on this website http://www.tablespoon.com/ . you would see that different posts appear in each box at intervals

September 15, 2011 · Reply

Vincent de Groot Author Editor

@Dan 18 April 2011:

I do have the same problem.. when a colorbox box is loaded and that box is closed the mosaic content shifts up.

A sample here: http://www.photo-vinc.com/NewGalleries

click on the FLASH button in the first mosaic element, then click the “X” on the bottom right of the colorbox.

Looking forward to a solution!

Vinc

September 26, 2011 · Reply

Bryan Author Editor

I wanted to give recognition and showcase how your plugin was used at:

http://www.hdwalls.com/gallery.php

This is a very slick and easy to use plugin. Thank you.

September 28, 2011 · Reply

David Author Editor
Very nicely done …

January 5, 2012 · Reply
David Author Editor
Hey Bryan – I have a question about your implementation. When you click on a thumbnail and bring up one of the profile boxes, with the setProfile() function changing the visibility of the #profile div from none to block, it causes the profile div to become visible but it also pushes up the page so that the top of the header area is no longer visible. Was this intentional? I tried replicating what you did and ended up with the same result but in my case, I don’t want the page to scroll vertically upward, I want the header to stay completely visible. But I can’t figure out how to make it do that.

Here’s the page I’m working on –
http://www.mercerislandhalf.com/facespageone/

[Content is still rough draft but it shows the affect I'm trying to get rid of.]

January 9, 2012 · Reply
- David Author Editor
  Never mind – I figured out what my problem was. I made a bad design choice with a div to place a color below the footer and it was throwing off the positioning. Removed the div (may use the body tag to implement the color), and the problem goes away.
  
  January 9, 2012 ·

Liam McArthur Author Editor

I’m receiving the following error in IE9:

SCRIPT5009: ‘jQuery’ is undefined
mosaic.1.0.1.min.js, line 10 character 2

September 30, 2011 · Reply

Sam Dunn Author Editor
Make sure you’re properly including a version of jQuery later than 1.5.1

September 30, 2011 · Reply

Russ Author Editor

Hi

Great plugin! Very slick…However, I would like to include a couple of buttons with external links in the overlay and while I can get the button to appear, adding a link to it screws the whole thing up! I assume this is to do with the whole overlay being a link. Is there a way for me to incorporate buttons etc into the overlay or do you know of another plugin that might do what I’m asking?

TIA

Russ Clarke

September 30, 2011 · Reply

omer engin birim Author Editor

Nice work.Thank you..

September 30, 2011 · Reply

Liam McArthur Author Editor

Please could someone check out http://www.loughanureholidayhomes.co.uk/ – I’ve implemented mosaic on there and it works absolutely fine on the home page, but on the ~/Property/ page the sliding text box seems to go black instead of opacitated like on the home page. How can I amend this? :)

Great script though!

Thanks,

Liam McArthur

October 5, 2011 · Reply

Darren Wilson Author Editor

Is there a way of changing this so it will work on iphone/ipad?

Thanks…

Darren

October 10, 2011 · Reply

Grant Author Editor

Your code gives a website so many possibilities. Thank you!

Question: the code works great until I put my cursor over the sliding bar. In i.e. the bar flickers and in Firefox the bar goes away but yet the text stays visible. Any clue why?

-Grant

October 11, 2011 · Reply

Megan Author Editor

I am trying to implement Mosaic in a gallery. I made a test page using the base.html as a model and everything worked fine. Then, when I copied the code into my stylesheet and pasted the HTML into my Page inside WordPress, the text started showing up behind the overlay. (To see what I mean, go here: http://mcography.com/folio/#). See how the text is showing up gray? It is set to white. This makes me think that the text is showing up behind the overlay, which doesn’t make any sense because it worked fine on my test page and I just copied the code from there.

I’ve tried everything I can think of: z-index, opacity, using an image rather than a background color, etc. But nothing works. Does anyone know how I can get the text to display ontop of the overlay? I would really like it to be white (rather than the gray-transparent color it is now). I’ve spent hours trying to figure this out, so any help would be much appreciated!

October 12, 2011 · Reply

Grant Author Editor

Answer: I had to add “!important” to the following code for there was an “a” tag background:none conflict elsewhere in my code.

.bar .mosaic-overlay {
bottom:-100px;
height:100px;
background:url(../img/bg-black.png) !important;
}

October 12, 2011 · Reply

Tim Author Editor

Just FYI, your README file in the download has an extension of .md. This should be changed to .txt. The .md extension is a MoneyDance file format and is read as such by computers that have MoneyDance installed.
Thx.

October 16, 2011 · Reply

Sam Dunn Author Editor
Tim – It is also the extension used for “Machine Description” -> http://www.fileinfo.com/extension/md

Interesting overlap

October 17, 2011 · Reply

Tim Author Editor

Megan, not sure about your text problem, but you are loading high res images as your thumbnails. This is making your page take FOREVER to load. You should make thumbnails…thumbnail size.

October 16, 2011 · Reply

Juanma_Alcon Author Editor

Hi everyone!
I´m trying to get mosaic plugin works in my page loaded through ajax method.

At first time the plugin works but when i load content through ajax it doesn´t work anymore.

how can i do this? any suggestion?
thanks!

pd. great plugin!!
pd2. excuse my english…

October 18, 2011 · Reply

Lee Clarke Author Editor
in your ajax content js file you need to add code you used on your index page for instance I added code to “hideLoading” section which was triggered after new content was loaded.

my ajax content loading code looks like this …

[code]
$(document).ready(function(){
//References
var sections = $("#art_links a");
var loading = $("#loading");
var content = $("#artcent_cont");

//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "page1":
content.fadeOut('slow', function() {
content.load("art_sec.html #section_page1", hideLoading);
content.fadeIn('slow');
});
break;
case "page2":
content.fadeOut('slow', function() {
content.load("art_sec.html #section_page2", hideLoading);
content.fadeIn('slow');
});
break;
case "page3":
content.fadeOut('normal', function() {
content.load("art_sec.html #section_page3", hideLoading);
content.fadeIn('slow');
});
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});

//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"});
};

//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
Shadowbox.setup();
//begin mosaic init
$('.fade').mosaic({
speed : 2000 // 2 second fade
});

$('.bar').mosaic({
animation : 'slide', // fade or slide
speed : 250 // point 25 seconds to slide
});

$('.bar2').mosaic({
animation : 'slide' //fade or slide
});

$('.bar3').mosaic({
animation : 'slide', //fade or slide
anchor_y : 'top' //Vertical anchor position
});
//end mosaic init
};

});
[/code]

this is how I load ajax content on my page, but your loading content probably won’t be same as mine although you get general idea of what you need to do.

hope this helps.

Lee ‘Sentinel’ Clarke.

November 14, 2011 · Reply

vajinismus tedavisi Author Editor

thanks…

October 18, 2011 · Reply

MilMil Author Editor

Hi There

I have set this up on my page and it works a charm, with my panel sliding up from the bottom on mouse over. Does anyone know how i would have my panel be in the “up” state on page load, hang for 10 seconds, then drop down to the state its in now (only reappearing on mouse over)

Thanks

October 20, 2011 · Reply

Flint & Tinder Author Editor

There seems to be a conflict with this plug-in and the jquery.easing.1.3.js script. Does anyone know how I can get them to work together? I need the easing script for the Coda slider I’ve implemented.

October 26, 2011 · Reply

Roland Author Editor

Love it! is there a way to change the image after click? only managed to change captions to a:visited. any kick in right direction would be very helpfull! :)

October 28, 2011 · Reply

Rehan Khan Author Editor

Oh I was looking for it, thank you so much, gonna try this plugin..

October 28, 2011 · Reply

Megan Author Editor

I still haven’t been able to figure out why the text on my sliders is gray. Anyone have any ideas? Here’s the explanation of the problem that I posted a few weeks ago:

I am trying to implement Mosaic in a gallery. I made a test page using the base.html as a model and everything worked fine. Then, when I copied the code into my stylesheet and pasted the HTML into my Page inside WordPress, the text started showing up behind the overlay. (To see what I mean, go here: http://mcography.com/folio/#). See how the text is showing up gray? It is set to white. This makes me think that the text is showing up behind the overlay, which doesn’t make any sense because it worked fine on my test page and I just copied the code from there.

I’ve tried everything I can think of: z-index, opacity, using an image rather than a background color, etc. But nothing works. Does anyone know how I can get the text to display ontop of the overlay? I would really like it to be white (rather than the gray-transparent color it is now). I’ve spent hours trying to figure this out, so any help would be much appreciated!

November 7, 2011 · Reply

Kris Author Editor
I experience exactly the same problem. The text is showing up behind the overlay. Can anyone help?
http://www.designator.dk/portfolio

December 22, 2011 · Reply
- Pascal Author Editor
  @Kris did you ever find out what was wrong I’ve got the same problem. Text is behind the semitransparent image and I can’t figure out how to correct it.
  
  September 10, 2012 ·

Measurement level Author Editor

I’ll be using these on my site…. thanking you muchly

November 8, 2011 · Reply

Jørund Author Editor

Great plugin! One question though:
Is there a way to make all boxes scale according to what device it’s viewed on?
I’m building a menu using several mosaic boxes wrapped in a container div, and I’m having some trouble when viewing it on mobile devices.

Any help is much appreciated :)

November 10, 2011 · Reply

dedTree Author Editor

Hi there,

First of all, thanks for a great plugin. Very quick and easy to use.

I do have a question about the behavior. If you check out http://dedTree.co.uk
I use the plugin to dynamically add up to around 30 tiles. You’ll notice that if the mouse is over the box when the new box is added, the text remains displayed, and does not slide back down.

I’ll have a look and see if I can spot a quick fix, but I thought I’d throw it out there just in case somebody else has already gone there :)

Cheers.

November 12, 2011 · Reply

srdan Author Editor

Hey!

I’m wondering if it’s posible to combine the “circle” and “bar2″ to one !?
And having the transparrent text bar static and the magnify-logo just showing on hover.?

November 12, 2011 · Reply

solie Author Editor

Is there a way to make the overlay, when hovered – cover the bg image entirely instead of just part way? For example, can you take ‘bar2′ and change it so that when you hover over it it ‘pops up’ to the top of the bg image?

November 16, 2011 · Reply

Emprego Author Editor

Amazing plugin. thanks.

November 24, 2011 · Reply

Stephne Author Editor

Can you safely but a div within an a tag?

block-level element

The mentioned element is not allowed to appear in the context in which you’ve placed it according to w3C on your example

December 1, 2011 · Reply

Robert Author Editor
here’s what worked for me. I havent checked if this works in all browsers yet.

Change the details div to a span instead of a div. In the css change .details to span.details and add display:block;

December 8, 2011 · Reply

Adam Author Editor

This is a great plugin, and here’s a useful script that makes it easier to look at:

$(function() {
$(‘div.tile’).each(function() {
var self = $(this);
var html = ” +
‘‘ +
” +
” + self.attr(‘title’) + ” +
” + self.text() + ” +
‘‘ +
” +
” +
”;
self.replaceWith(html);
});
});

Place this before the plugin and it automatically turns this:

Example Paragraph.

into an entry for the plugin. Much easier to read.

December 8, 2011 · Reply

Adam Author Editor
Oops, here is the actual code:

$(function() { $('div.tile').each(function() { var self = $(this); var html = '' + '' + '' + '' + self.attr('title') + '' + '' + self.text() + '' + '' + '' + '' + ''; self.replaceWith(html); }); });

Example Paragraph.

December 8, 2011 · Reply

Gorkxs Author Editor

Thanks,
I appreciate the work.

December 28, 2011 · Reply

Kim Author Editor

I’m trying to use this on the front page of my site and it looks phenomenal. Great work. The only trouble I’m having is that it won’t show up at all in IE8 or 9. It works if I save the page as an html file in chrome and open the saved page with IE, but not accessing the site directly. Any thoughts?

January 4, 2012 · Reply

Kim Author Editor
Amateur markup mistake! Tisk tisk on me. Anyways, here’s the implementation: http://www.bergstenmusic.com

January 4, 2012 · Reply

Jay Author Editor

I’m pretty new to javascript & jquery, and I’m having a problem implementing this. I have no problem with adjusting the css, etc to style the boxes, but I would love to make these boxes work as percentage based width. Is it required to set a fixed pixel width/height on these?

I can’t for the life of me figure out how to do this. When I set a % width on the .mosiac-block and don’t specify a height, it does not expand to the height of the content (I assume because of overflow:hidden). But no matter the changes I’ve tried, I can’t get it to display properly as a percentage based width.

Can anyone help here?

January 4, 2012 · Reply

Hazhir Author Editor
Hey Jay,
Did you able to find your answer or not? I have the same problem with this plug-in. Please let me know if you could have find any answer for this problem.

May 19, 2012 · Reply

Ecem Ulusoy Author Editor

Very nice. Thank you.

January 6, 2012 · Reply

john Author Editor

It’s working for me if I put it in a PHP file, but when putting the code into the WordPress HTML editor, I get this strange bug, Any idea why?

http://crystalaser.johncozen.com/

January 6, 2012 · Reply

jayjay Author Editor

can somebody help me getting this work together with quicksand (http://razorjack.net/quicksand/ ) ?

at first everything is working fine, but when i use quicksand and the images slide over the screen every image/div container looks like this:
http://imageshack.us/photo/my-images/32/bildschirmfoto20120107u.png/

same problem when i am using infinite scroll ! the first div container look normal, but when i scroll down and more containers load every container has the loading gif…

hope you can understand my question.

January 7, 2012 · Reply

pierrewiberg Author Editor
Hi Jayjay,

Did you find a solution for this?
I’m having the same problem, the images won’t load.

February 8, 2012 · Reply

Karen Author Editor

Hey Sam! Is there anyway to change the shape of the block (background picture) to a different shape, such as a circle or polygon? and the overlay to match that shape?

January 12, 2012 · Reply

Manel Author Editor

Hi Sam,
First of all I would like to give you a great congratulation for this work. In Spain you are a “máquina” (machine) or a “crack” ;-)
I have implemented in my site (see website URL) mosaic plugin and it’s amazing. Wow with a simple work to implement produce a nice view! So I would tell you one problem i have.
Mosaic plugin works fine in IE and Mozilla Firefox but don’t in Safari and Chrome.
If you lunch Chrome / Safari and go to the website you see the last option in the menu “Galeria…” so whnen click the first time mosaic doesn’t load images, so if you click again then works.
Have you any feedback something like this?
Can you explain me ehat can i do?
Thank’s in advance…

January 13, 2012 · Reply

Manel Author Editor
Problem solved!
Putting CSS before to start loading JQuery mosaic.
That’s all.
I would like to thank you to Firebug that helps me to reach the solution! ;-)

January 24, 2012 · Reply

Juan Author Editor

Hi, please help me to install this great plugin.

WordPress 3.2.1

Thanks.

January 19, 2012 · Reply

Sam Dunn Author Editor
This is not a WP plugin, it’s a jQuery plugin which requires editing of the HTML to implement

January 19, 2012 · Reply
- marcus Author Editor
  Hi
  
  Im really struggling to get this to work in WordPress, please do you have any instruction, using latest as of date today wordpress, with the twentyeleven theme, im using a child theme..
  
  February 5, 2012 ·

Juan Author Editor

ok, tnks Sam

January 20, 2012 · Reply

Victor Ocampo Author Editor

How do you change the height of the box overlay so that you can fit more text during the hover? I’m newbie and trying to learn these things any advise would be great.

Thanks All.

January 20, 2012 · Reply

robert Author Editor
you have to change the ‘height’ and ‘bottom’ settings under .mosaic-overlay in the mosaic.css file for whichever animation style you are using.

February 5, 2012 · Reply

lorenza Author Editor

Hi, thank you for the plugin. sorry, I’m a bit confused: I can’t understand if it works on iPad – I’d like a sliding boxes page, were each box shows infos on mouse over and is linkable to an other page – can it be on iPad?
thankyou!
Lorenza

January 22, 2012 · Reply

darklomba Author Editor

Check line 42 in the code:

if(base.options.options.animation == ‘fade’ && $(base.options.overlay, base.el).css(‘opacity’) == 0 ) $(base.options.overlay, base.el).css(‘filter’, ‘alpha(opacity=0)’);

I think base.options.options.animation is wrong.

January 23, 2012 · Reply

darklomba Author Editor

I don’t know what may be wrong. I can’t get any images to be loaded in the mosaic-backdrop div. It seems to be blocking the load of images. It’s really frustrating.

January 23, 2012 · Reply

darklomba Author Editor

Problem solved. I was messing up everything with my css stylesheets.

January 23, 2012 · Reply

matthias Author Editor

hello,
thank you for the great plugin.
my question:
i have different links on my page. if i start the popup-menu, always appear all pictures in a row. i only want to have the pictures from one link. is this possible?

example:
http://themeforest.net/item/fullview-fullscreen-background-slider-template/full_screen_preview/492073

thx
matthias

January 26, 2012 · Reply

musti Author Editor

Is there a way to load image dynamically (like Tumblr) by using Ajax ?

February 7, 2012 · Reply

Nick Author Editor

Hi there, this is a really great plugin – i have a bit of a question – I’m loading my images dynamically server side and I need to have the height of the divs driven by the height of the image (fixed width) – i.e. images of various heights with the same width and an overlay on each. Is this possible without having a seperate inline still over each div or differrent class?
Thanks
Nick

February 10, 2012 · Reply

Nick Author Editor
..excuse typo – i meant inline style, not still

February 10, 2012 · Reply

matthias Author Editor

Hello, great work! Thank you!! I have a problem in IE8 .
The portfolio-site doesn´t appear:
http://schmuck-bamberg.de/neu12/aschaffenburg_fachhochschule.html

Could you give me a solution, please?

thx matthias

February 14, 2012 · Reply

Lee Author Editor

Great plugin but I was wondering if there was any way of reversing the effect – starting with the caption and then mouseover to reveal the image?

February 15, 2012 · Reply

kishan sharma Author Editor

Hello sir it was awsome i found it quite awsom another great plugin i found after isotopes great work keep it work

February 18, 2012 · Reply

Digger Derrick Author Editor

awesome idea and costumer service.

February 29, 2012 · Reply

Mark Author Editor

It seems not to be compatible with Quicksand plugin (http://razorjack.net/quicksand/). Is there any way to disable temporarly the plugin and call it again at the end of some other animation?

Thanks you very much.
Marco

February 29, 2012 · Reply

Commandrea Author Editor

I’m stuck in reverso land w/ the code! The default has the caption/overlay displayed and on hover the picture shows… how do I flip ‘er around?

March 1, 2012 · Reply

Commandrea Author Editor
Please disregard this issue- I had some mismatched/missing css code…

March 1, 2012 · Reply

Conzoe Author Editor

Hi,
first I want to say thanks for this awesome tool. It looks great and is easy to use.
I am having an issue using it though. While it works fine on one of my pages, I want to use on a second page with three .png elements next to each other (which means three div-containers with one picture and one effect each).

For some reason, however, the first picture in the row is not shown completely as soon as I place it in the mosaic block bar container. A small piece on the right of the picture is always cut off, while the other pictures next to it are shown completely. Any ideas why this is happening? I adjustet the weight tags in the .css file, but it doesn’t have any effects.

Does anybody know where my mistake is?
Thanks in Advance.

Conzoe

March 4, 2012 · Reply

Conzoe Author Editor
Stupid, stupid me!
I edited the backup css file, not the right one.
Problem solved :)

March 4, 2012 · Reply

Dean Author Editor

I’m trying to implement this on my site to display my folio. I already have a javascript animated menu, when i implement this it stops my menu animation from working and all text on side is stacked on top of each other. I’m kinda boggled as to why. is there a limit as to how many javascript files i can link to my site? i have a total of 5 .js files. can i have multiple css or do i have to paste them to my existing css file?

Thanks in advance

March 5, 2012 · Reply

Dean Author Editor
problem solved.

March 6, 2012 · Reply

Magento go themes Author Editor

Great work. I am using this for a project and i will show update the link here.

Thanks for sharing

March 18, 2012 · Reply

Steve Author Editor

Really nice plugin.

March 21, 2012 · Reply

TICC Author Editor

Hi there,
A great plugin! On desktopbrowsers it works beautiful and fast but after implementing everything I checked the testsite on my ipad and, offcource, the hover function is not working as it should. Is there a way to achieve the same user experience on both desktop and mobile devices?

Hope to find answer

March 21, 2012 · Reply

Julius Author Editor
I created a workaround for touch by adding a line (to mosaic.js, after line 66) which fades the overlay 4 seconds after it first appears:

$(‘.mosaic-overlay’).delay(4000).fadeOut(400);

This stops the overlay being permanently visible after it’s clicked on in iOS.

I have a second problem on iOS though – the overlay appears on first click but not subsequently. Any suggestions?

November 5, 2012 · Reply
- Julius Author Editor
  Apologies for answering my own question, but this seems to work. I added a duplicate click function, which means that the overlay is also generated on click (so works on touch) but fades after 4 seconds:
  
  // Handle fade animations
  case ‘fade’:
  $(base.el).hover(function () {
  $(base.options.overlay, base.el).stop().fadeTo(base.options.speed, base.options.opacity);
  $(base.options.overlay).delay(4000).fadeOut(400);
  },function () {
  $(base.options.overlay, base.el).stop().fadeTo(base.options.speed, 0);
  });
  
  $(base.el).click(function () {
  $(base.options.overlay, base.el).stop().fadeTo(base.options.speed, base.options.opacity);
  $(base.options.overlay).delay(4000).fadeOut(400);
  });
  
  break;
  
  November 5, 2012 ·

Inspirational Quotes Author Editor

Mosaic – Sliding Boxes and Captions jQuery Plugin | Build Internet I was recommended this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You’re amazing! Thanks! your article about Mosaic – Sliding Boxes and Captions jQuery Plugin | Build InternetBest Regards Justin

March 24, 2012 · Reply

Pali Madra Author Editor

You helping people like me to portray ourselves as rock stars!

Thanks a ton.

March 25, 2012 · Reply

garden furniture Author Editor

Mosaic – Sliding Boxes and Captions jQuery Plugin | Build Internet I was recommended this blog by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my trouble. You are wonderful! Thanks! your article about Mosaic – Sliding Boxes and Captions jQuery Plugin | Build InternetBest Regards Veronica

March 29, 2012 · Reply

Bret Bork Author Editor

Sam, Thanks for putting this project together. Very Nice!
And, thanks for sharing it.

Sincerely, Bret

April 25, 2012 · Reply

Pet Kuafor Author Editor

Great mosaic slide.Thank you sam.

May 18, 2012 · Reply

Shamier Coffie Author Editor

Thnx Very Nice!

May 21, 2012 · Reply

Andrew Author Editor

I can’t figure out how to change the speed of the sliding overlay (). I tried changing some numbers next to “speed” in both .js files to no avail. I’m really not a query/javascript person, so I’m a little lost messing around in there.

The effect can be seen here: http://steviemusic.andrewborstein.com/releases. I just want to slow down the sliding effect.

June 10, 2012 · Reply

Andrew Author Editor
Nevermind!

I found the area to insert/modify the jquery parameters in the of the site, not the .js files.

I changed this:

jQuery(function($){
$(‘.cover’).mosaic({
animation : ‘slide’, //fade or slide
hover_x :’400px’, //Horizontal position on hover
});
});

to this:

jQuery(function($){
$(‘.cover’).mosaic({
animation : ‘slide’, //fade or slide
hover_x :’400px’, //Horizontal position on hover
speed : ’500′ //Speed of slide movement
});
});

June 10, 2012 · Reply

Aakash Author Editor

that is one coolest plugin! awesome

June 17, 2012 · Reply

Bart Author Editor

Hi

Is it possible to make the mosaic-box and overlay the same height as the image within the box? I want to use this in a fluid site, but it seems like you have to give it a pixel-height.

June 19, 2012 · Reply

Tony Author Editor

Is there a way I can add a delay onto the slide mechanism as I don’t want it firing when people are scrolling my page and the mouse is inadvertently hovering over the selected elements.

June 22, 2012 · Reply

Julian Author Editor

Is it somehow possible to have the possibility that the overlay won’t go away if you have a special class added to it? e.g. ‘active-thumb’?
That would be very helpful since my visitors don’t leave the page.

I hope to hear from you soon!

June 28, 2012 · Reply

jordan Author Editor

On activation, the error “The plugin does not have a valid header” pops up.

June 29, 2012 · Reply

Mark Author Editor

anyone figure out how to integrate the jquery easing plugin?

any sort of direction appreciated.

thanks,
Mark

July 5, 2012 · Reply

nick Author Editor

Implemented this on our site at http://www.designlagoon.com.

Works great on PC and Mac but when i test on ipad and iphone the overlay does not cover 100% off the viewport – about 30% is left uncovered at the bottom.

Don’t think it’s a problem with this plugin – perhaps a conflict with another plugin i’m using.

Other than that – thanks for a great plugin!

July 6, 2012 · Reply

kim Author Editor

Any advice for accomplishing this plugins features in WordPress? I have inherited a HTML design from a previous designer and am now trying to implement it with as little changes as possible into a WordPress template. Everything works great in HTML version here: http://www.bluechipproductions.ca but I am unable to accomplish this same effect in the WordPress template! Any help appreciated!

July 14, 2012 · Reply

Ade Author Editor
Still trying to figure this out. Tried different write ups to bring this into my wordpress theme. No luck. I’m a total novice to web development. I understand that I am supposed to input some code into the functions.php, I have tried Nate’s solution but I had no progress. Can anyone please offer a simple tutorial on how to implement this into our wordpress?

August 29, 2012 · Reply
- kim Author Editor
  There is no tutorial that I know of. I discovered that my jquery was just not being called correctly for wordpress. css-tricks to the rescue (again) http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/ was all i needed to get the code to work correctly. it should be added to functions.php.
  
  Hope that helps!
  
  August 29, 2012 ·
- Ade Author Editor
  wow Kim. thank you so much for your. i have been searching around for weeks. i will give that link a go and let you how i do. thank you so much again :)
  
  August 29, 2012 ·

freelance web designer kerala Author Editor

Nice work… Thanks………….

August 9, 2012 · Reply

Ian Snook Author Editor

Can this be made so that when i click the image it bring up a light box rather than a link?

September 5, 2012 · Reply

Nate Author Editor

All the images on my site are sized by %. I have been able to change most of sizing to %, but for some reason. It wants the height to be sized in px. Ive tried to size it with % but it just acts like I have set the height to 0.

http://jsfiddle.net/zBWHF/2/

Is there a way to change the jquery to allow me to only size the width of the image and let the height auto size proportionally? Or is there a way to size the height with %?

I am pretty new to the jquery world and I cant seem to figure out what to do. Can some one out there help me?

September 11, 2012 · Reply

Jervin Author Editor

I have changed ‘hover y’ so that the box rises further (I’m using the bar 2 example style setup). This reduces the height of the overlay so that it reveals the bottom of the image, and doesn’t even fully background the text.

What can I do to make the overlay height compensate for the increased protrusion?

I have tried all the obvious, and less obvious, CSS and javascript parameters. I’m at a loss.

Thanks!

October 7, 2012 · Reply

Beats By Dre Author Editor

perfect fit. With various sizes of replaceable eartips, the Beats by dre CX300-II make sure that you can find the ideal personalised sign. This also means that you need not have the player

October 17, 2012 · Reply

kami Author Editor

Thanks alot i was searching for it and from your site i get it free thats very nice of you great work

October 18, 2012 · Reply

trần công nghiệp Author Editor

nice plugin ! i fount it

November 9, 2012 · Reply

Stefan Author Editor

Great plugin. I wanted to use it with a Magento site and got everything set up, except the bar slider wont show up. It seems to be configured correct because the image is shown without anything on top of it. When I change something the div details shows up and the progess.gif shows.
So it must be correct. Only the bar never shows up. So I don’t know if doesn’t get triggered.

I inserted this to get no conflict with other jQuery:

var $j = jQuery.noConflict();
$j(document).ready(function($j) {

$j(‘.circle’).mosaic({
opacity : 0.8 //Opacity for overlay (0-1)
});

$j(‘.fade’).mosaic();

$j(‘.bar’).mosaic({
animation : ‘slide’ //fade or slide
});
});

Still nothing happen, really appreciate some help on this.
Thanks.

November 17, 2012 · Reply

Ryan Author Editor

Any plans to make this responsive? Cheers, beautiful work.

November 21, 2012 · Reply

LT Author Editor

Hello-
Are there known issues with accessing this technique in IE9?

I cannot visit this tutorial page in my copy IE9. It will not load.
I reinstalled IE but the same problem.

I implemented this hover technique but a small minority of our testers
do not get the text on the hover slide up, but other using IE9 do get the
text and it behaves as it should. I tried adjusting the z-index but that did not fix it.

Is there a browser setting you can think of that might be causing this?
Thanks!

November 27, 2012 · Reply

Russ Clarke Author Editor

HI

I have used mosaic in a page that I have turned into a Facebook tab app. It work fine in Firefox and Safari but not Chrome. I simply get a constant loading circle…any ideas of a fix. I have supplied the URL. It;’s the tab called ‘Shop’

cheers

Russ Clarke

February 7, 2013 · Reply

Fred Peres Author Editor

How can I invert the fade effect? I want to have a image faded, and with the hover, the image appears.

February 8, 2013 · Reply

Rono Author Editor
GREAT WORK with this plugin!
I need to reverse the effect too….please anyone??? THAKS

February 14, 2013 · Reply

hitesh Author Editor

how to add data tag in overlay content

February 13, 2013 · Reply

hitesh Author Editor

how to add data anchor tag in overlay content

February 13, 2013 · Reply

Ramiro Author Editor

Hi there, first of all, great work! Thank you for shearing this beautiful peace of code. I’m trying to implement it on WordPress. So far I’ve managed to make it work, but I have a little problem with the text in #details.
For some strange reason it displays behind the black transparent image, preventing the user to reed it properly.
If any of you guys could give mi a tip for what could be going on here I would be very grateful. I don’t have much experience implementing jQuery in WP.

Here is an example of my problem: http://fratercastello.seosem-consultores.com/

Thanks again!

February 15, 2013 · Reply

Elena Author Editor

Problem with the sliding boxes script on one of my computers with IE. Ddoes not like: . Does not load the page. Any suggestions?

March 1, 2013 · Reply

Robert Author Editor

What browser support does this have? I’m not reading endless posts to find out and I’m not testing on my own. I figured that this would be somewhere, but what do I know. The code looks good, but questionable elements make me think this isn’t 100% cross-browser. I have a solution now, but as I was cleaning my finished project I came across your saved page and just wanted to mention you should post support information… May be I missed it somewhere, who knows. Make it great.

March 3, 2013 · Reply

David Author Editor

Hello,

The plugin is fantastic.

I have only noticed some problem on my page. I think this is only my problem because I don’t see anybody write about this problem:

- I use a homepage with 10 icons, and sometimes when I load or reload the site, all the 10 icons using this plugin, dont load, instead appears 10 black boxes.

I try to reaload page and load properly, but sometimes need to reload two times.

I anybody can help me, I’ll be very happy :))

Thanks, very nice plugin.

April 5, 2013 · Reply

David Author Editor
Autoreply: this problem only affect to Chrome on Windows 8.

Loading page onto IE 10 its works OK.

I have disable Plugin ADBLOCK on Chrome but continue the problem. I think my Chrome need to be update.

Thanks for the plugin.

April 5, 2013 · Reply

nancy Author Editor

Hey tis website i got while m surfing…tis tech is realy great…whn i use tis i din get any results y tis..cn anyone help me..

April 24, 2013 · Reply

nancy Author Editor

do anyone help me…tis plugin works fine in my desktop browser but whn i install it on my server i did not get any result xcept background..pls help me as soon as possible..

April 24, 2013 · Reply

olivia Author Editor

Great plugin! Its so beautiful! Thank you!

I’m quite new to jquery; after reading all the comments I still can’t find a solution to my problem:

All I’m getting is the progress.gif, it’s probably something very stupid that I’ve done/haven’t done, but can anyone let me know whats the most common problem for this?

Thanks!

April 24, 2013 · Reply

Stephen Author Editor

you don’t need the “a” tag to span the details.

just put it on the image is one solution for validation ..still works

Mosaic – Sliding Boxes and Captions jQuery Plugin
by Build Internet

May 10, 2013 · Reply

Jan Author Editor

Hi Sam,

been watching your developments for a while.

Just a quick question, how would you go about creating the .bar2 example but with the added exception of the image being completely overlaid which would change to a darker opacity (just like the fade example) once hovered over and then the slide up box slides up but is in white? So in essence take the .fade example and .bar2 and merge into one?

just before I attempt doing this myself I thought I would see if you had an easier option, thanks.

Jan

May 10, 2013 · Reply

omer Author Editor

first of all thank for ur hard work and i really love it.

well it is working fine but only in ie i dont know why but not working on firefox and chrome :(:(:(:(:(:( plz help

May 14, 2013 · Reply

Tom Author Editor

Thanks a lot, it is really quallity work you have done. It would be perfect though if it was possible to apply it to bootstrap thumbnails with responsive layout.
Thanks

2 days ago · Reply

Sam Dunn

Files

Highlights

Share

Tags

Short URL