fancybox lightbox alternative

Miscellaneous BBCodes, including MOD BBCodes which usually require file edits.
User avatar
cisco007
Ciscox
Ciscox
Posts: 2843
Joined: Thu Sep 16 2010 3:25 pm
Country Flag: Mexico

fancybox lightbox alternative

Postby cisco007 » Tue Oct 04 2011 6:43 pm

Title: fancybox - lightbox alternative
Description: FancyBox displays images, html content and multi-media iin a sort of "lightbox"
Author(s)/or Link: 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:
open: this is for prosilver your style might be similar

Code: Select all

styles/prosilver/template/overall_header.html

Find:

Code: Select all

</head>

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>

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}


BBcode usage:

Code: Select all

[fancybox]{URL}[/fancybox]


HTML replacement:

Code: Select all

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


Helpline:

Code: Select all

[fancybox]image url[/fancybox]


Example:

Code: Select all

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


DEMO:


UPDATE #1: added support for Youtube videos
UPDATE #2: Fancybox was updated to version 2x
FAQ's
  • how to use for youtube videos?

    this is how to do it!

    *NOTE: again depending on how you ended up adding the js edit this might look differently from yours!
    BBcode usage:

    Code: Select all

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

    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}&amp;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>

    Helpline:

    Code: Select all

    [fancyboxyt]full clean youtube url[/fancyboxyt]

    Example:

    Code: Select all

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

    DEMO:
    YouTube Video
    extract and upload to fancybox folder overwriting existing one!

    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!
    Image
old versions
Download Now !fancybox
12-12-11
extract and upload entire folder to root!

Download Now !fancybox
2-04-13
delete old folder, extract and upload new folder to root!
Image


User avatar
cisco007
Ciscox
Ciscox
Posts: 2843
Joined: Thu Sep 16 2010 3:25 pm
Country Flag: Mexico

Re: fancybox lightbox alternative

Postby cisco007 » Tue Oct 04 2011 9:34 pm

Title: fancybox gallery bbcode
Description: 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!
Author(s)/or Link: Same as previous post!
MUST HAVE DONE EDITS POSTED IN PREVIOUS POST!

BBcode usage:

Code: Select all

[fancyboxg]{URL}[/fancyboxg]

HTML replacement:

Code: Select all

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

Helpline:

Code: Select all

[fancyboxg]image url[/fancyboxg]

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]



DEMO:


 ! cisco007 Says:
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!


UPDATE
 ! cisco007 Says:
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!
Image

User avatar
cisco007
Ciscox
Ciscox
Posts: 2843
Joined: Thu Sep 16 2010 3:25 pm
Country Flag: Mexico

Re: fancybox lightbox alternative

Postby cisco007 » Tue Mar 27 2012 4:29 pm

 ! cisco007 Says:
first post update to newest fancybox version, fixed some code

 ! cisco007 Says:
first post updated with working youtube bbcode, updated document.js download, and image for youtube bbcode!
ENJOY!
Image

User avatar
cisco007
Ciscox
Ciscox
Posts: 2843
Joined: Thu Sep 16 2010 3:25 pm
Country Flag: Mexico

Re: fancybox lightbox alternative

Postby cisco007 » Mon Feb 04 2013 11:52 pm

 ! cisco007 Says:
first post updated with new fancybox version v2.1.4, just extract and upload folder, overwritting existing folders
Image


Social Media

       

Return to “BBCodes”



Who is online

Users browsing this forum: Tbot and 1 guest