Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Add-ons
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Jigzone.com BB Code - Embed Puzzles in your forums - (BBCode) Details »»
Jigzone.com BB Code - Embed Puzzles in your forums - (BBCode)
Version: 1.00, by BirdOPrey5 (Senior Member) BirdOPrey5 is offline
Developer Last Online: Aug 2023 Show Printable Version Email this Page

Category: BB Code Enhancements - Version: 4.0.x Rating:
Released: 08-18-2010 Last Update: Never Installs: 19
Re-useable Code Translations  
No support by the author.

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

Add a New BB Code

Title: Jigzone Puzzle
BB Code Tag Name: puzzle
Replacement:
Code:
<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:[puzzle]5F14EE77238[[/puzzle]
Description: Embedded Puzzles powered by www.jigzone.com.
Use Option: No
Button Image: (optional)
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:
Code:
<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;border: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:
[puzzle]5F14EE77238[/puzzle]

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 for other BB Code enhancements. They work on all versions.

Screenshot Attached:
https://vborg.vbsupport.ru/attachmen...1&d=1282230253
https://vborg.vbsupport.ru/attachmen...1&d=1282230253

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

Download Now

File Type: txt jigzone bbcode.txt (3.4 KB, 57 views)

Screenshots

File Type: jpg ss_puzzlebefore.jpg (141.6 KB, 0 views)
File Type: jpg ss_puzzleafter.jpg (121.4 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #12  
Old 08-20-2010, 04:32 AM
MausEG365 MausEG365 is offline
 
Join Date: Aug 2009
Posts: 3
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by BirdOPrey5 View Post
OK I figured this out for someone else, 99% sure you have the same issue... his forum was auto converting his URLs to all lowercase, he had "Prevent Shouting" enabled... you must disable it-
VBulletin Options -> Message Posting and Editing Options -> Prevent Shouting
You can view source of your forum to confirm if the code is in upper case or not.
Checking now...sorry for the delay, I just got home from work.

well the thumbnail definitely changed to the image i want to display, but now the main post says "The puzzle is loading" and then times out...referring to loss of internet(not the case) or a java issue(will check that in a minute)
Reply With Quote
  #13  
Old 08-20-2010, 04:36 AM
MausEG365 MausEG365 is offline
 
Join Date: Aug 2009
Posts: 3
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

That was it! For the life of me, dont know why JAVA wasnt up to date on my design PC, but its all good.

THanks for the help, and great work on these mods.

I will be following your profile for future ones.
Reply With Quote
  #14  
Old 08-20-2010, 07:10 PM
thecelticway thecelticway is offline
 
Join Date: Aug 2009
Posts: 54
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

working great~~~~~thanks

would be better it you were able to delete the icon photo making it a good quiz ..... any directions on how to remove the side picture
Reply With Quote
  #15  
Old 08-20-2010, 07:41 PM
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
Senior Member
 
Join Date: Jun 2008
Location: New York
Posts: 10,610
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by thecelticway View Post
working great~~~~~thanks


would be better it you were able to delete the icon photo making it a good quiz ..... any directions on how to remove the side picture
Unfortunately that is not an option at the moment, you can only disable the picture if you login and play their 'puzzle of the day' in which case the setting is in your account options.

There is a similar site where you can embed puzzles also called www.jigsawsite.com and they do not provide a sample picture by default (though you can show it if you want.)

If you prefer to use their puzzle then do the following- but they ask you limit yourself to 1 puzzle per forum page to help their bandwidth.

Use the same settings as above but the following replacement:

Code:
<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:
[puzzle]20090907090552206[/puzzle]

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:

Code:
<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:
Code:
<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:
[puzzle]2009090218222477[/puzzle]

But I would use this puzzle site as a last resort, the original code looks much better IMO.
Reply With Quote
  #16  
Old 08-20-2010, 10:18 PM
COL NIL SATIS COL NIL SATIS is offline
 
Join Date: Aug 2009
Location: Liverpool UK
Posts: 802
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

cool
Reply With Quote
  #17  
Old 08-21-2010, 03:45 AM
kylek kylek is offline
 
Join Date: Oct 2003
Location: British Columbia, Canada
Posts: 798
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks for this, worked great once I found the shout setting!!!

Where would you find info on the other puzzles you have shown on your site? (Hangman, word search, etc)
Reply With Quote
  #18  
Old 08-21-2010, 10:13 AM
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
Senior Member
 
Join Date: Jun 2008
Location: New York
Posts: 10,610
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

If you click on the link to "My Profile" I provided in the mod you will see a BB Code called "ProProfs Games" - that embeds those games.
Reply With Quote
  #19  
Old 08-21-2010, 02:05 PM
thecelticway thecelticway is offline
 
Join Date: Aug 2009
Posts: 54
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by BirdOPrey5 View Post
Unfortunately that is not an option at the moment, you can only disable the picture if you login and play their 'puzzle of the day' in which case the setting is in your account options.

There is a similar site where you can embed puzzles also called www.jigsawsite.com and they do not provide a sample picture by default (though you can show it if you want.)

If you prefer to use their puzzle then do the following- but they ask you limit yourself to 1 puzzle per forum page to help their bandwidth.

Use the same settings as above but the following replacement:

Code:
<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:
[puzzle]20090907090552206[/puzzle]

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:

Code:
<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:
Code:
<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:
[puzzle]2009090218222477[/puzzle]

But I would use this puzzle site as a last resort, the original code looks much better IMO.


thanks...:up:... that site works just fine and lets us use this as a quiz... but it only makes the lowest amount of piece's despite setting it to 6x6 :erm:
Reply With Quote
  #20  
Old 08-21-2010, 03:35 PM
BirdOPrey5's Avatar
BirdOPrey5 BirdOPrey5 is offline
Senior Member
 
Join Date: Jun 2008
Location: New York
Posts: 10,610
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by thecelticway View Post
thanks...:up:... that site works just fine and lets us use this as a quiz... but it only makes the lowest amount of piece's despite setting it to 6x6 :erm:
You know there are 2 places you need to change 4x4 to 6x6?
Reply With Quote
  #21  
Old 08-21-2010, 08:41 PM
thecelticway thecelticway is offline
 
Join Date: Aug 2009
Posts: 54
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by BirdOPrey5 View Post
You know there are 2 places you need to change 4x4 to 6x6?
no.... I didn't....... hopefully you will tell me.......
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:29 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.07982 seconds
  • Memory Usage 2,363KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (8)bbcode_code
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (3)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete