Hello jpmastermind,

There isn’t a ‘swapItems’ method. You should remove then append items.

Ah I read the JS and saw swapItems function, thought it could be used. The issue is when I remove, if it’s already being displayed, it just shows a blank black space, appending new items doesn’t replace this empty space.

?

Hello walteryip, I am sorry for the delayed response. Could you please send me the error message?

I have the script like this $.each(item2remove, function(i,e){ $(”.magicwall”).magicWall(“stop”); //stop switch $(”.magicwall”).magicWall(“removeItems”, $(e)); //remove item $(”.magicwall”).magicWall(“start”); }); after this script executed and some of the photos in the grid have been removed and when after a while the console prompt this error. TypeError: elem.get(...) is undefined return elem.get(0)[”_” + pluginName + “Item”];

Perfect! bought the script but I am stuck in applying it as a “background image”, any pointers? Page is located at luggagelab.se

Thanks!

http://luggagelab.se/wall/

Much tidier version, still can’t make it work. Hope you can help!

Hello deison,

For the one on the homepage (http://luggagelab.se/), you need to append the .magicwall div to the .container-comming-soon div and add the following CSS:

.magicwall#demo{
    position: fixed;
    top: 0;
    left: 0;
}

For the second page (http://luggagelab.se/wall/), just add the following CSS:

.magicwall#demo{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

Best regards

Hello charlez,

Unfortunately, this is not possible by default as the main purpose of the plugin is to create ‘an image grid’.

However, you can achieve this by using a solid color image as a background for the tile and apply the same technique that I used in the ‘hover content’ demo, only in this case you will add another div that contains you HTML content which will be visible all the time and not just on hover. I hope this makes sense to you.

Let me know if you need more help.

Best regards

Hello Nitrox, yes I know what you mean, thank you for your help, that’s a great idea. I’m going to buy it now. Best regards

Hello kallekillen,

I tried setting ‘paused’ to true and it was sufficient. Could you please send me the URL? There might be a JS error on the page.

Hi,

I haven’t got a live URL yet unfortunately. I’m not getting any JS errors on the page – any other ideas?

Hello kallekillen,

No problem, add your work folder to a zip file and send it to me via email.

Hello alfker,

I’m sorry, I don’t understand what you mean by zoom on images. Do you mean the ColorBox functionality?

what i mean Show the full picture my exmple : http://mob4me.com/new/ plz check this img http://img.mob4me.com/mobile/Ascend-P6_2_1402091016.jpg

and how to Integration “hover content” with “ajax source”

thank you

Hello gazeboo,

It’s really just as simple as the other methods on this demo. Here is a quick example, assuming an anchor element with id ‘clickable’:

<a href="#" id="clickable">Click me</a>

Javascript to switch item at index ‘2’ with a random item:

$("#clickable").click(function(){
    $(".magicwall").magicWall("switchItem", 2, "slideX", 800, "easeInOutCubic");
});

Best regards,

Hello! Thank you or your answer. But it seems that this method don’t work. I open console on your page and after run this code :

$("#demo").click(function(){
    $(".magicwall").magicWall("switchItem", 2, "slideX", 800, "easeInOutCubic");
});

And after click on id ‘demo’ i get an error:

TypeError: e.get(...) is undefined
jquery.... > eval (line 1, col 17652)

What i do wrong?

Hello gazeboo,

I revisited the code and fixed this issue, I will update the demo with a working example of this method very soon. Thank you for letting me know about this.

Best regards,

Hello Wodco,

Yes, it is possible. Please check this demo.

Best regards

Hello sjespers,

Visible items have a class magicwall-grid-item, so you can use this little snippet to select all visible items using jQuery:

var gridItems = $(".magicwall-grid-item"); 

Best regards

Thanks for quick reply. I got that far but it seems that does not work for every item. I see some items with the class magicwall-loading. If I do an ”.each” on $(”.magicwall-grid-item”); I am not getting all of them.

I want to fade out every item gradually from the top left to the bottom right.

Hello sjespers,

Try this code:

$(".magicwall-grid-item").each(function(){
$(this).delay($(this).data("index")*50).fadeOut(300);
})

data("index") specifies index of the item on the visual grid.

Best regards

Hello GonnelliActiveden,

Unfortunately no, the grid items must be of the same size.

I got it to display by setting the height. I keep forgetting to do this. Also is there a way to keep the ratio of the images and still have it responsive? My images seem to always be wrong even after setting the min,max heights.

Hello redbearded,

I am glad you got the first problem figured out. Regarding the ratio of the images, make sure thumbSizing is set to cover.

If that is not what you meant or if you need more help, let me know.

Best regards

Thanks for replying. I couldn’t get the images to arrange properly and keep their aspect ratio. I ended just rolling my own gallery from scratch. I still think magicwall is great though!

Hello Timoon,

Unfortunately IE8 is not supported. Supported browsers by this plugin are Chrome, FireFox, Safari, Opera, IE9, 10 and 11.

Best regards

is it possible to redirect visitor to a specific url if he uses a not supported browsers ?

Best regards

Sarah

Hello Sarah,

Sorry for the delayed response, try using IE conditional comments.

(this page might help you: http://stackoverflow.com/questions/10964966/detect-ie-version-in-javascript )

Best regards

Hello nathanthompson,

Creating margins between items would probably break some of the animations, so it’s not supported. Using HTML5 videos is not supported by default but it’s possible with a few tweaks to the code.

Best regards

Cheers for the speedy reply.

Solution find with css:

.magicwall { display: inherit; height: 339px; position: relative; }

Hello yehiel,

Try moving the script tag to the bottom of the page.

Best regards

Thanks!!

And I wanted to ensure I could have divs or tables and other content on top of this. I did not see a sample in your demo, that is my concern. If was supplied I would purchase,,just need for simple background effect. I think it’s a cool trick.

Hello Bono04,

Yes, it can be used as a background. Please see this demo:
http://teefouad.com/plugins/magicwall/demo5-fullscreen.html

You can also place content over the wall by wrapping both the magic wall and the content in a relatively positioned container and make the magic wall absolutely positioned with 100% width and height. Here is the required code:

HTML:

<div class="wrap">
    <div class="my-content">...</div>
    <div class="magic-wall">...</div>
</div>

CSS:

.wrap{
    position: relative;
}

.wrap .my-content{
    position: relative;
    z-index: 1;
}

.wrap .magic-wall{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

Best regards,

I have uploaded the update but firebug is still reporting errors including a “document.body.insertBefore(el, document.body.lastChild);” in your js file which consequently gives a not function error.

Please move the script to the bottom of the page (before the end body tag).

Great! I moved <script type=”text/javascript” src=”javascript/jquery.magicwall.js”></script> <script type=”text/javascript” src=”colorbox/jquery.colorbox-min.js”></script> from head to above the call and it works! This is such a great wall!

Hello oag1988,

Use maxItemWidth and maxItemHeight in combination with columnsCount and rowsCount. Please check the documentation for further info.

Best regards

Hello oag1988,

Use the animations option.

Best regards

Hi thanks for getting back so fast! I tried this and when I add this in the code the entire magic wall turns black. I am using the “fixed ” demo

Could you please send me the URL (if any)? You can also open up the console panel (F12) and see if there are any JS errors.