Jigzone.com BB Code - Embed Puzzles in your forums - (BBCode)

[BirdOPrey5]

Jigzone.com (http://www.jigzone.com) is a free website where you can upload photos and make jigsaw puzzles out of them. These puzzles can then be embedded into your forum using this BB Code, like you would a YouTube video.

Jigzone offers many options in terms of how to embed the puzzle and in how many pieces (and what shaped pieces) your photo should be broken into. For simplicity's sake I have hard coded this BB Code as a traditional 20 piece jigsaw. I will explain what needs to be changed for other options.

After being embedded users will have options to change the shape and number of pieces from the options that will appear to the left of the puzzle.

Live Demo: Here (http://www.juot.net/forums/showthread.php?p=852997#post852997)

Add a New BB Code

Title: Jigzone Puzzle
BB Code Tag Name: puzzle
Replacement:

<script src="http://www.jigzone.com/zes?i={param}&amp;z=6" type="text/javascript"></script><noscript><a href="http://www.jigzone.com/puzzles/{param}">Link to Puzzle</a></noscript>

Example:5F14EE77238[
Description: Embedded Puzzles powered by www.jigzone.com.
Use Option: No
Button Image: (optional) https://vborg.vbsupport.ru/external/2010/08/25.jpg
Remove Tag If Empty: Yes
All Disable Options: Yes

------
This code makes a 20 piece classic shaped jigsaw puzzle. The part of code that decides this is the part: &amp;z=6

6 = 20 piece classic jigsaw
0 = 48 piece classic jigsaw
5 = 6 piece classic (too easy!)
18 = 41 pieces "Tetris" Blocks
30 = 154 piece classic (Hard!)
34 = 240 piece squares (Weird!)
33 = 247 piece triangles (Crazy!)

For a complete list make a puzzle at Jigzone and play with the options, look at the embed code to see how the number after "z=" changes to see what number corresponds to your preferred puzzle.
------

To make one you need to sign up for an account at www.jigzone.com and upload a photo or image. You will then be given link and embed codes. Go to the first link code it will look something like:

<a href="http://www.jigzone.com/puzzles/5F14EE77238?z=0&amp;m=AE250BFF3C.930EFB0"><img src="http://www.jigzone.com/im/pCut/0.png" alt="Click to Mix and Solve" style="width:400px;height:300px;margin:4px;padding:0;bord er:1px solid #999;background:transparent url(http://www.jigzone.com/puz/zemThumb?p.up.M.U5.P0.32u0i:jpg)"/></a>

The number you need is from the line: http://www.jigzone.com/puzzles/5F14EE77238?z=0&amp;m=AE250BFF3C.930EFB0">
All you need is the puzzle code, in this case: 5F14EE77238

You put the "Puzzle Code" in between the "puzzle" tags:
5F14EE77238

As the embed code uses JavaScript you may need to reload the page after submitting to see the puzzle, and of course you must have JavaScript enabled. If you don't have JS enabled you'll get a link to the puzzle instead.

I have hard coded the initial options as a 20 piece classic jigsaw but before you start the puzzle you can use the options on the left to change the shape and number of pieces to your liking.

-----

Notice: The 'puzzle code' must be entered exactly as it is from the link code provided, including the fact it MUST be in UPPERCASE- CE14EEB7547 for example...
If you have "Prevent Shouting" enabled you will have to disable it-
VBulletin Options -> Message Posting and Editing Options -> Prevent Shouting

Please mark as installed if you use this. :)

Check My Profile (https://vborg.vbsupport.ru/member.php?u=258922) for other BB Code enhancements. They work on all versions.

Screenshot Attached:
https://vborg.vbsupport.ru/attachment.php?attachmentid=121037&stc=1&d=1282230253
https://vborg.vbsupport.ru/attachment.php?attachmentid=121038&stc=1&d=1282230253

Download the .txt file for a copy of the Install instructions.

[MagicThemeParks]

Thanks for doing this :)

For some reason, I can't get this to work in a 'normal' forum, but when I move it to my Moderator forum, it works. :(

I have my javascript set correctly at the site level. Is there a particular forum-level setting that I have to change?

Edited: Strange, now no matter which puzzle code I put, it displays the generic "Condo Plant" puzzle for me. My code is "CE14EEB7547", can you test it on your site to make sure it works for you? May be some sort of conflict for me from another mod or something.

[BirdOPrey5]

When I test that code on my forum get a picture of Walt Disney-
http://www.juot.net/forums/showthread.php?t=45416
Post # 4

Someone else mentioned a similar issue in the 4.0 thread of this mod (and many reported it working fine.)

What browser and OS are you using?
Do you have a link to where it is on your forum (if publicly assessable?)

[BirdOPrey5]

OK it is weird... I changed the code a little to take out some info that doesn't seem to do anything... on my forum pages it's all working fine- multiple puzzles each of the right picture... BUT, in my BB Code manager window I too only see the "Condo Plant" puzzle... as it's ony happening in my admin cp it's not a big problem but it does make me wonder what is going on... I know the header template isn't called in admin cp and some other javascripts of mine don't work at all in admin cp- I wonder if that has something to do with it... I will see what I can come up with.

[MagicThemeParks]

I'm using Windows Vista and Google Chrome, but also showed incorrectly in FireFox for me.

[MagicThemeParks]

FYI: Found another site if we want to use that one's embed instead :)

http://jigsawsite.com/

[BirdOPrey5]

That other site asks you only link to 1 of their puzzles per page to save their bandwidth so please don't use this more than once per forum page.

Use the same settings as above but the following replacement:


<div style="background-color: #ffffff; border: 1px solid black; height: 350px;">
<object width="100%" height="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="scale" value="noscale" />
<param name="movie" value="http://static.jigsawsite.com/{param}_4x4s.swf">
<param name="wmode" value="transparent" />
<param name="allowNetworking" value="all" />
<param name="allowScriptAccess" value="always" />
<embed wmode="transparent" scale="noscale" allowScriptAccess="always" allowNetworking="all" src="http://static.jigsawsite.com/{param}_4x4s.swf" width="100%" height="100%" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</div>
<p><a title="play 1000s of jigsaw puzzles online" href="http://jigsawsite.com/">Online jigsaw puzzles</a> from <a title="create jigsaw puzzles from your photos" href="http://jigsawsite.com/">JigsawSite.com</a></p>


The example code would be:
20090907090552206

To change the default number of pieces change the 2 instances of "4x4" to higher numbers like "5x5" or "6x6".


It's a bit of a pain to find the code you need to use... you need to go to the embed code which looks like:


<div style="background-color: #ffffff; border: 1px solid black; height: 350px;">
<object width="100%" height="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="scale" value="noscale" />
<param name="movie" value="http://static.jigsawsite.com/2009090218222477_4x4s.swf">
<param name="wmode" value="transparent" />
<param name="allowNetworking" value="all" />
<param name="allowScriptAccess" value="always" />
<embed wmode="transparent" scale="noscale" allowScriptAccess="always" allowNetworking="all" src="http://static.jigsawsite.com/2009090218222477_4x4s.swf" width="100%" height="100%" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</div>
<p><a title="play 1000s of jigsaw puzzles online" href="http://jigsawsite.com/">Online jigsaw puzzles</a> from <a title="create jigsaw puzzles from your photos" href="http://jigsawsite.com/">JigsawSite.com</a></p


You need to look at the line:
<param name="movie" value="http://static.jigsawsite.com/2009090218222477_4x4s.swf">

And take the number before the underscore: 2009090218222477 - that is what you put between the puzzle tags:
2009090218222477

But I would use this puzzle site as a last resort, the original code if you can get it to work looks much better IMO.

[MagicThemeParks]

Thanks :up:

But, I agree that I'd love to have the first one working right. Any other info that I can provide to you to get it working?

[BirdOPrey5]

Only if you can post it somewhere on your forum, I don't know if you have a 'test' forum maybe? If need be make it [puzzle2] or something so I can see how it works on your live site.

[MagicThemeParks]

Here's a link: http://www.waltdisneyboards.com/fun-games/55108-walt-disney-67-piece-picture-puzzle.html

[BirdOPrey5]

To change the default number of pieces change the 2 instances of "4x4" to higher numbers like "5x5" or "6x6".

[MagicThemeParks]

Is that for the new code from jigsawsite.com?

[BirdOPrey5]

Yes, sorry, I updated my post on the jigsawsite.com code...

[MagicThemeParks]

Cool. Yes, the jigsawsite.com code works. Check this thread for the 2nd post for example: http://www.waltdisneyboards.com/fun-games/55108-walt-disney-67-piece-picture-puzzle.html

[BirdOPrey5]

Eureka!!!

On your site the embedded code is all lowercase, ce14eeb7547.... on my site it's all uppercase... CE14EEB7547 - and it has to be uppercase to work...

Now the question is why is it lower case on your board- if you didn't type it in in lower case then it may be a plugin changing it to lower case... I know VBSEO has an option to convert all URL's to lowercase, 99% of the time this is a good idea, but this is one of those cases where it's a bad idea.

[MagicThemeParks]

Is there a way to exclude it from the option vBSEO has for this?

[BirdOPrey5]

I don't have VBSEO so I don't know how it works, but I do remember a thread where someone else had this problem and was told he could disable this behavior in VBSEO options... you may need to check with them if you don't know how- wish I could help but I've never even seen VBSEO.

[MagicThemeParks]

Nope, not vBSEO, but I adjusted the "prevent shouting" to 0 (to disable it) and it worked :)

There is an option in your VBulletin Options - Message Posting and Editing Options - Prevent Shouting

[BirdOPrey5]

Thanks, will update the first post.

[klaush]

Thanks BirdOPrey5, let´s say that this code is fantastic for photo-communities!

[BirdOPrey5]

If anyone prefers this the AME mod instead of a BB Code this is the definition.

The URL you use is the one that it in the address bar when you choose "Open Puzzle" on Jigzone.

[angeljs]

Neither the original or the AME code works for me. The original keeps showing a completely different picture, no matter which browser I use, and the AME plugin just shows the link and not the puzzle within the post. :(

Edit: False alarm...the AME code works perfectly, I'd just added the wrong link, sorry!

[BirdOPrey5]

Neither the original or the AME code works for me. The original keeps showing a completely different picture, no matter which browser I use, and the AME plugin just shows the link and not the puzzle within the post. :(

Edit: False alarm...the AME code works perfectly, I'd just added the wrong link, sorry!

If the BB Code is showing the wrong picture you probably have the "Prevent Shouting" option in vBulletin Options turned on... this won't let too many capital letters be put in a post next to each other BECAUSE IT THINKS SOMEONE IS TYPING WITH CAPS LOCK ON. If you turn off this option it should work fine. This code is sensitive to the different case of the letters.

[angeljs]

Ok, thanks. Great mod, by the way! :D

[BirdOPrey5]

Thanks. :up: I do a "Puzzle of the Day" every day on my forum and a lot of members who I never would have expected even cared about puzzles enjoy it... we all post our best times for each puzzle.

[realmr]

nice add on, it will be nice if this can be used with more administrative options, like displaying, who solved successfully first as it could be used for some forum contests too :)