95 comments found.
Hi there,
Getting a lot of errors when running this? It only successfully transitions once and then stops:
Uncaught TypeError: undefined is not a function jquery.magicwall.min.js:79Css3d.set jquery.magicwall.min.js:79MagicWallItem.reset jquery.magicwall.min.js:1433o.onComplete jquery.magicwall.min.js:770s jquery.magicwall.min.js:79(anonymous function)
Uncaught TypeError: undefined is not a function jquery.magicwall.min.js:79Css3d.set jquery.magicwall.min.js:79MagicWallItem.reset jquery.magicwall.min.js:1433(anonymous function) jquery.magicwall.min.js:1121x.extend.each jquery.js:657x.fn.x.each jquery.js:266MagicWall.resetItems jquery.magicwall.min.js:1120MagicWall.update jquery.magicwall.min.js:1146(anonymous function)
Hello vbrendan,
Could you please send me the page URL?
Hi thanks for your reply.
You can view the page here: http://fuel-microsite-test.gopagoda.com/grid-box
Hello vbrendan,
Could you please use the readable version so I can debug properly?
Thank you
Sure, I have changed the file to the non-minified version for you. Same link as before.
Any ideas?
Hello vbrendan,
I have posted an update (v2.0.1) to fix this bug, please re-download the ZIP file when the update is approved.
Best regards,
Seems to be fixed, thanks! What was the issue?
It was a problem with the animation plugin, I am glad everything works for you now 
Hi, This looks great…
Is it possible to have each item fade in one at a time?
thank you, Andrea
Hello Andrea,
Setting loadingMode to ‘chain’ will achieve an effect similar to what you described.
Best regards
Hi,
Thank you so much! I have two more questions: 1. How can I make a delay between each item fading in? 2. I tried to exclude all the other animations, but the things I tried (following the documentation) didn’t work. I tried: excludedAnimations: ‘rollInX,rollInY, rollOutX, rollOutY, slideX, slideY, flipX, flipY, slideRow, slideColumn, -fade, -rollInX,rollInY, -rollOutX, -rollOutY, -slideX, -slideY, -flipX, -flipY, -slideRow, -slideColumn, -fade’
but that didn’t work. Help!
many thanks Andrea
Hello Andrea, I am afraid this is currently not possible. There is no option to add an interval between items loading.
Please help, I’m trying to place the Fixed Width Grid and all I get is a black box… been following example 2 on documentation. Any ideas?!
Nevermind, got it… I need more sleep! 
Everything is good, just having issues with EXPLORER 10…only 10…Explorer 11 is fine!! Any ideas?!
I only see a black box on Explorer 10
I had to include: <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE9” >
WHY?
Transisiton effects not working on IE 10
Used: <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
All is good on IE 10!
Hello esalinas358,
CSS3 transitions do not work on all browsers but it should work on IE10+. I am glad you have everything sorted out. If you have any issues with the plugin on any browser, please let me know.
Best regards
Hello Sir,
Sorry to bother again but we have to deliver and important project with your Magic Wall and everyone is in panic mode over here because they cannot create more than one instance on the same page.
Can you please tell me how to have more than one Magic Wall on the same page?
Thank you
Thank you for GREAT Support… They didn’t even see the demo on how to do it was inside your package… (OUF!) I will go ahead and rate you 5 stars.
Hi Nitrox,
I have a quick question for you. My developer seems to have issues showing up more than one MagicWall on the same page. Can you please guide us (we want to have around 10 different images (magic wall) on the same page.
Thank you
Thank you for GREAT Support… They didn’t even see the demo on how to do it was inside your package… (OUF!) I will go ahead and rate you 5 stars.
Hello,
I am thinking of buying your script.
Can you please tell me if the image doesn’t have the same dimension if we can do a straight line (height 300) and the width will adjust automatically so they are next to each other (no white space).
Thank you
Hello jf,
The images are not required to have the same dimensions. You can control how the images are sized by setting the ‘thumbSizing’ parameter.
Best regards
That’s WONDERFUL news!! I have some images that are extremely big (mb)... do you have caching functions built-in?
I want to load tons on 1 page but I want to make sure it’s responding really well… Thank you
Last question.. When you are thumbsizing an image that is 4 mb is it still 4mb at the end or you shrink it? Then I guess I am buying
You can choose to load the image from the cache (if possible) or not.
The image size will remain the same as the image is being scaled down but not resized. However, there is a PHP script called ‘timthumb’ that allows resizing images on the fly, which can drastically reduce the file size of the image that is being loaded.
Great replies and support… I bought it!! Love your script/support so much that I am considering buying your other script. Let me ask you a few questions for the other one.
Just a last question – Is it possible to make it fully responsive for mobile devices and get all the animation?
Hello jf,
Sure, the grid is responsive and the animations work on mobile devices as they do on desktops.
Please go ahead and ask if you have any more questions
Best regards
Hello Nitrox – We are currently having a few integration questions… someone named “Ravi” will email you… You can validate with my message that I have a paid license Thank you and looking forward to bring your masterpiece “live”
How often are the JSON/Flickr/Instagram feeds requested ? does it requests for new photos every X seconds ? and how many ? alternatively Im planning to use MagicWall to start as an empty grid, but that will be increase in photos one by one, using socketio notifications and append img elements.
Additionally, is it possible to switch a specific tile with a specific image ? and not just one randomly chosen ?
Thanks
Hello omarojo,
The request is only made once at the start of the application and it requests a specific number of images (passed as an option).
You can append or remove items to or from the grid by using methods “appendItems” or “removeItems”
At the moment, if you switch an image, you cannot specify the image that will replace it, but this will definitely be added in the next update.
Best regards
Thanks for your reply. I noticed, if the wall starts empty, and then I begin to add images, none of them appear, I need to always start with at least 1 image set. (Or maybe im doing something wrong).
Also I find extremely useful to be able to specify the image to be replaced when switching. Looking forward to your next update. Great job.
Hi, it’s not available the link of the filles purchased.
in download
resolved – the firewall was the problem
but it’s not working anymore …. I founded another autor who report the same problem http://themeforest.net/forums/thread/envato-server-issues-autoupdates/111462#909376
Hello Iryne,
It seems like a problem with the Envato server, did you try contacting the support team?
If you are unable to download the update, send me an email and I’ll forward the files to you (as a temporary solution).
Best regards
I contacted the Support Team 5 times in 3 days, unfortunately I still had no answer for them…...
the link in download is going to : [link removed] but it’s not available the download…...
Hello Iryne,
I hate waiting as much as you do, but we will just have to be patient
It might take a few days for the Envato Support Team to respond to your ticket but I am sure they will contact you as soon as they can.
In the mean time, if there is anything I can do to help you, please let me know.
Best regards
..sorry for waiting…... but my 2 kids are at home….and working with them around …. it’s better to do nothing… ...just enjoy Thank you and I’ll wait…
I cannot get the hover content to work at all. I followed the demo but its not doing anything on hover. The wall is working outside of this perfectly. Here is my code:
<li data-thumb="img.jpg">
<div class="hover-content vcenter">
<div>
<p>test content</p>
</div>
</div>
</li>
$('.magicwall').magicWall({
maxItemWidth:333,
maxItemHeight:187,
onHoverExclude:"item",
breakpoints:"1200,800,640,480",
countX_1200:3,
countX_800:3,
countX_600:2,
countX_480:false,
});
$(window).resize(function(){
$('.magicwall').magicWall('update');
});
.magicwall li .hover-content{
position: absolute;
z-index: 100;
opacity: 0;
text-align: center;
color: #FFF;
background: rgba(0,0,0,0.75);
-webkit-transition: opacity 150ms ease-out;
-moz-transition: opacity 150ms ease-out;
transition: opacity 150ms ease-out;
}
I got it to work. Not sure where the error was but it works now. I had to set width and height to 100% to get it to work right and stay responsive.
Hello redbearded,
That’s great news
Let me know if you need any help.
Is it possible to make the thumbnails clickable?
Ideally, I’d like to place an tag inside the
Apologies, the HTML tags got stripped. It should read: “place an <a></a> tag inside the <li /> elements…”
Yes, it is. Use the code that I provided in a previous comment (Timoon thread) and add class .colorbox to the link element.
Best Regards
This doesn’t seem to work as expected. Any mark-up that gets placed inside the <li /> element winds up sitting outside of the “magicwall-item-thumb” div after the plugin has been executed—doesn’t the anchor need to be inside this element?
The end result here is that the anchor tags are appearing above the thumbnails. Also, the “colorbox” class doesn’t seem to have any effect.
I managed to sort this out with CSS. For anyone else interested, this is what you need in order to make your thumbnails clickable:
.magicwall UL LI A
{
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Hello LarterStyles,
It looks like the link I’ve posted to my previous comment is broken, I am sorry about that, here is the code (your code is very similar):
HTML:
<li data-thumb="IMAGE_PATH">
<a href="#" class="mylink">
<img src="MY_IMAGE_URL" />
</a>
</li>CSS:
.magicwall li a.mylink{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}Regarding the ColorBox plugin, I will be uploading a new demo that shows exactly how to integrate ColorBox with MagicWall.
Please let me know if you need any help.
Best regards
Is it possible to add this script to a Squarespace site?
Hello saribrooke, yes it is. Go to Settings->Code Injection and place the javascript there.
Hi Nitrox, thanks! I did that, but where do I tell it to get the images from?
Try moving the script tags to the bottom of the page, I see that they are still placed in the page head. You have 4 errors in the console, all of them caused by jQuery being undefined.
Thank you for looking into that! I moved everything to the footer, and now it’s showing 2 errors. I implemented everything like you did in the examples, do you know where I’m still going wrong?
Hi Nitrox, Any help you can give would be greatly appreciated! I have to show the page to my clients tomorrow and I know if I can get this working it’s really going to wow them.
Hello saribrooke,
Could you please send me temp. credentials in a private message?
Hello i’d use the hover content with one item fixed in center (image 13) and have 5 colums and 5 rows. How can i have 5 rows? Tank you very much.
Set countX and countY to 5, this will ensure you have 25 items (5 rows and 5 columns) regardless of the grid holder dimensions. If you need more help, please let me know.
sorry its good like this …. i will use 3 rows
thank you 
I have an other request .. how can i do to have full scrren ? thanks
The grid will expand to the width and height of its container, so the trick is to make the container fill the width and height of the window. See example 5 in the documentation.
thank you very much it works
For item fixed, I’d put a picture instead of background color so I changed with a background-image. But I’d like added a link on the picture how can i do ?
And about hover content i’d an image instead of text and button. Or a background color. How can i do ?
Thank you.
Simply place the image instead of the hover content, also you can wrap the image in an anchor tag if you want to make it clickable. You will probably need to set the position of the image or link to absolute and expand it to 100% width and 100% height.
image doesn’t appear when i place it instead the hover content. So i think there is something missing….. perhaps i don’t use good code… or i do a mistake…
Try using this code:
HTML:
<li data-thumb="IMAGE_PATH">
<a href="#" class="mylink">
<img src="MY_IMAGE_URL" />
</a>
</li>CSS:
.magicwall li a.mylink{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}With your code i have image (img src) but not thumb….. I’d like img src in hover of the li data-thumb.
I am sorry, I am not sure I understand what you need to do. Could you please explain more and show me the code that you are using?
I’d like create an image rollover on each picture… sorry for my english
its good i found solution..
Ok, that is great news
Hello I have a problem…. In local all works very well but online script doesn’t work… I don’t understand…... you can see here http://www.ccilu.fr/intro/demo/demo6bis.html
its good now…;) i used directly demo fullscreen.
you can see my page http://www.ccilu.fr/ thanks for this script
one last question…. on phone my image center doesn’t appear in first… its my only problem now…
You need to set the following options to a fixed value: countX, countY.
Right now, I think the js scripts are conflicting. There should be a main slider that shows the iphone and intro right under the menu but it does not show
And the magicwall part is black.
Could you help me solve this conflict issue? I can send you the files as well.
Hello dh9kim,
You have the scripts in the head tag, which means that the plugin will be trying to access the body of the document too early. You can use the ‘ready’ event listener to delay script execution or you can try moving the script tags to the bottom of the page (right before the ending tag of the body).
Nice website by the way
Thanks for the help!
I put the magicwall js at the end and now the magicwall works but my other functions (main intro section under the menu & bottom section “what users are saying” & latest blog) won’t show… i think it’s conflicting with the .js
Do you have an idea to fix this? I can send you the index file for you to look at as well!
Let us know!
You are loading jQuery two times on the page (1.7.1 on the header and 1.9.1 on the footer). This could be causing the conflict. Remove one of them (1.9.1 maybe) and try again.
Whats happened to the demo?
Hello kryten68, there was a technical problem, it is now solved and everything is working fine.
Thanks – just purchased this. Amazing work!
Is it possible to use this with featured images from posts, and then click to link to that post ?
Thanks
Hello JHarford, Yes, but it would require a few lines of PHP code to make it work as this is not a WordPress plugin.
Hi, does not work in IE9, IE10 or IE11.
Hello hernan_jirada, this issue is fixed now, please re-download and make sure you have version 1.0.3
Thanks!
I can not get the script to work 
I have tried many times now with no luck at all. What to do? I would like example 6 on my website, but nothing will show and I have done everything right.
Could you please send me the URL in an email?
Good job, 5 stars
I like but does not work in “IE9” or “IE10” The grid is not displayed, all in black and there aren’t images. If this is fixed I’ll buy it !
Hello visualdaba, it was a problem in the preview only and it is fixed now.
Solved, thanks!
