fancybox lightbox alternative

[cisco007]

[bbcodet]Title:[/bbcodet] fancybox - lightbox alternative
[bbcodet]Description:[/bbcodet] FancyBox displays images, html content and multi-media iin a sort of "lightbox"
[bbcodet]Author(s)/or Link:[/bbcodet] bbcode created by me cisco thanks to fancybox
Request?: no
this next bbcode is just for a single image! you can post multiple, but they will only be able to open up one at a time!
first download the attached folder and extract, and upload entire fancybox folder to root of forum!
then install as follows:
[i_i]open: this is for prosilver your style might be similar

Code: Select all

styles/prosilver/template/overall_header.html

[/i_i]
[i_i]Find:

Code: Select all

</head>

[/i_i]
[i_i]Add before:

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="fancybox/document.js"></script>

[/i_i]
NOTE:
if you already have a jquery-xxx.js file in your header do not add this on, to avoid conflicts! if you don't plan on using the mousewheel to scroll through the pictures on a gallery (which is the next bbcode i will be posting) then don't add the edit for the jquery.mousewheel-3.0.6.pack.js, the others you do need!
also once again, like i've stated in other bbcodes, if they still conflict just remove all the overall_header edits except the jquery edit and add it to the begining of the html replacement, but remove the {ROOT_PATH}

[i_i]BBcode usage:

Code: Select all

[fancybox]{URL}[/fancybox]

[/i_i]

[i_i]HTML replacement:

Code: Select all

<a href="{URL}" id="image" title=""><img src="{URL}"  style="width:25%;height:25%;" alt="" /></a>

[/i_i]

[i_i]Helpline:

Code: Select all

[fancybox]image url[/fancybox]

[/i_i]

[i_i]Example:

Code: Select all

[fancybox]http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg[/fancybox]

[/i_i]

[bbcodet]DEMO:[/bbcodet]
[fancybox]http://farm5.static.flickr.com/4058/425 ... 91e026.jpg[/fancybox]

[bbcodet]UPDATE #1: added support for Youtube videos[/bbcodet]
[bbcodet]UPDATE #2: Fancybox was updated to version 2x[/bbcodet]
FAQ's

• how to use for youtube videos?
  
  [spoiler]this is how to do it!
  
  *NOTE: again depending on how you ended up adding the js edit this might look differently from yours!
  [i_i]BBcode usage:

  Code: Select all

  [fancyboxyt]http://www.youtube.com/watch?v={IDENTIFIER}[/fancyboxyt]

  [/i_i]
  [i_i]HTML replacement:

  Code: Select all

  <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
  <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>
  <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" media="screen" />
  <script type="text/javascript" src="fancybox/document.js"></script>
  <a href="http://www.youtube.com/watch?v={IDENTIFIER}&fs=1" id="youtube" title="Youtube Video"><img style="width: 130px; height: 97px; border:1px solid black;" alt="YouTube Video " src="http://i.ytimg.com/vi/{IDENTIFIER}/default.jpg" /></a>

  [/i_i]
  [i_i]Helpline:

  Code: Select all

  [fancyboxyt]full clean youtube url[/fancyboxyt]

  [/i_i]
  [i_i]Example:

  Code: Select all

  [fancyboxyt]http://www.youtube.com/watch?v=071KqJu7WVo[/fancyboxyt]

  [/i_i]
  [bbcodet]DEMO:[/bbcodet]
  [fancyboxyt]http://www.youtube.com/watch?v=071KqJu7WVo[/fancyboxyt]
  extract and upload to fancybox folder overwriting existing one!
  [rapidshare]http://rapidshare.com/files/1455203/fancybox.zip[/rapidshare]
  right click on image and save on your computer, then upload to your forums images folder NOT your styles/theme/images folder but the images folder in the root of your forum!
  [/spoiler]

[spoiler=old versions][download=http://rapidshare.com/files/3968950/fancybox2.zip]fancybox,12-12-11,extract and upload entire folder to root![/download][/spoiler]
[download=http://rapidshare.com/files/1769004846/ ... v2.1.4.zip]fancybox,2-04-13,delete old folder, extract and upload new folder to root![/download]

[cisco007]

[bbcodet]Title:[/bbcodet] fancybox gallery bbcode
[bbcodet]Description:[/bbcodet] using fancybox you can attach multiple images in one post, and if any other images in same page are using this bbcode, you will also be able to view them within a gallery, scrolling through them using the mousewheel or the previous/next buttons!
[bbcodet]Author(s)/or Link:[/bbcodet] Same as previous post!
MUST HAVE DONE EDITS POSTED IN PREVIOUS POST!

[i_i]BBcode usage:

Code: Select all

[fancyboxg]{URL}[/fancyboxg]

[/i_i]
[i_i]HTML replacement:

Code: Select all

<a href="{URL}" rel="gallery" title=""><img src="{URL}" style="width:25%;height:25%;" alt="" /></a>

[/i_i]
[i_i]Helpline:

Code: Select all

[fancyboxg]image url[/fancyboxg]

[/i_i]
[i_i]Example:

Code: Select all

[fancyboxg]http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg[/fancyboxg][fancyboxg]http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg[/fancyboxg]

[/i_i]


[bbcodet]DEMO:[/bbcodet]
[fancyboxg]http://farm5.static.flickr.com/4058/425 ... 91e026.jpg[/fancyboxg][fancyboxg]http://farm3.static.flickr.com/2647/386 ... d52b1a.jpg[/fancyboxg][fancyboxg]http://farm3.static.flickr.com/2680/430 ... 6e6c4b.jpg[/fancyboxg][fancyboxg]http://farm3.static.flickr.com/2489/423 ... 930011.jpg[/fancyboxg]

[cisco_note]PLEASE DO NOT USE THIS GALLERY BBCODE, OR YOU COULD IF YOU WANT BUT FOR SOME REASON IT DOES NOT WORK ON HERE, IT WORKS WHEN I TESTED IT, BUT SINCE I HAVE A WHOLE BUNCH OF JS ALL OVER THE PLACE SOMETHING IS INTERFERING, MIGHT WORK FOR YOU THOUGH![/cisco_note]

[bbcodet]UPDATE[/bbcodet]
[cisco_note]I finally got it working, it should work for anybody,, except those of you that have the prime links mod by primehalo, your end should be fine, i just had to do some tweaking to get it to work on this site! if you want to know how to get it work on your site if you have the prime links mod installed ask me in a bbcode support topic! thanks! and enjoy! looks like a great image bbcode! i will try to add bbcodes for youtube![/cisco_note]

[cisco007]

[cisco_note]first post update to newest fancybox version, fixed some code[/cisco_note]
[cisco_note]first post updated with working youtube bbcode, updated document.js download, and image for youtube bbcode!
ENJOY![/cisco_note]

[cisco007]

[cisco_note]first post updated with new fancybox version v2.1.4, just extract and upload folder, overwritting existing folders[/cisco_note]