[RC] Lightview image mod

[cisco007]

[bbcodet]Title:[/bbcodet] [RC] Lightview image mod
[bbcodet]Description:[/bbcodet]

Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library.

[bbcodet]Author(s)/or Link:[/bbcodet] bbcode cisco007, code Lightview
Request?: no
[bbcodet]Notes:[/bbcodet] Upload entire folder keeping structure to root of drive and do the following edits to the overall_header.html first:
[i_i]Find:

Code: Select all

</head>

[/i_i]
[i_i]Add before:

Code: Select all

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--[if lt IE 9]>
  <script type="text/javascript" src="{ROOT_PATH}lightview/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="{ROOT_PATH}lightview/spinners.min.js"></script>
<script type="text/javascript" src="{ROOT_PATH}lightview/lightview.js"></script>
<script type="text/javascript" src="{ROOT_PATH}lightview/custom.js"></script>
<link rel="stylesheet" type="text/css" href="{ROOT_PATH}lightview/lightview.css" />
<link rel="stylesheet" type="text/css" href="{ROOT_PATH}lightview/custom.css" />
<script type='text/javascript'>
  Lightview.setDefaultSkin('custom');
</script>

[/i_i]
IF you already have a latest jquery on your header leave the jquery.min.js line off the header edit.

[i_i][bbcodet]BBcode usage:[/bbcodet]

Code: Select all

[lightview]{URL},{SIMPLETEXT}[/lightview]

[/i_i]
[i_i][bbcodet]HTML replacement:[/bbcodet]

Code: Select all

<a href="{URL}" class="lightview" data-lightview-group="gallery" data-lightview-caption="{SIMPLETEXT}"><img src="{URL}" alt="" style="width: 25%;height: 25%;" /></a>

[/i_i]
[i_i][bbcodet]Helpline:[/bbcodet]

Code: Select all

[lightview]image(s) links,caption[/lightview]

[/i_i]
use multiple lightview bbcodes to see the gallery at work

[i_i][bbcodet]Example:[/bbcodet]

Code: Select all

[lightview]http://witnessthis.files.wordpress.com/2009/04/paradise-island.jpg,Navigation is also possible using the keyboard arrows and the mousewheel[/lightview]

[/i_i]
[bbcodet]DEMO:[/bbcodet]
[lightview]http://2.bp.blogspot.com/-G79C1Yoi0Zk/T ... B2.jpg,put some kind of caption here[/lightview]
[lightview]http://witnessthis.files.wordpress.com/ ... nd.jpg,put a caption here[/lightview]
[lightview]http://www.thinctanc.co.uk/photography/ ... pg,caption test[/lightview]
[bbcodet]Faq's[/bbcodet]

• can also be used for youtube videos

[spoiler][i_i][bbcodet]BBcode usage:[/bbcodet]

Code: Select all

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

[/i_i]
[i_i][bbcodet]HTML replacement:[/bbcodet]

Code: Select all

<a href="http://www.youtube.com/embed/{IDENTIFIER}?autoplay=1&autohide=1&border=0&egm=0&showinfo=0&showsearch=0" class="lightview" data-lightview-type="iframe" data-lightview-group="video" data-lightview-group-options="controls: 'thumbnails'" data-lightview-caption="{SIMPLETEXT}." data-lightview-options="width: 638,height: 360,viewport: 'scale',thumbnail: { image: 'http://i.ytimg.com/vi/{IDENTIFIER}/default.jpg', icon: 'video' }"><img style="width: 130px; height: 97px; border:1px solid black;" alt="Video" src="http://i.ytimg.com/vi/{IDENTIFIER}/default.jpg" /></a>

[/i_i]
[i_i][bbcodet]Helpline:[/bbcodet]

Code: Select all

[lightviewyt]youtube video link,caption[/lightviewyt]

[/i_i]
[i_i][bbcodet]Example:[/bbcodet]

Code: Select all

[lightviewyt]http://www.youtube.com/watch?v=vgr2syY_OU4,see if it works[/lightviewyt]

[/i_i]
[bbcodet]DEMO:[/bbcodet]
[lightviewyt]http://www.youtube.com/watch?v=vgr2syY_OU4,see if it works[/lightviewyt][/spoiler]
[download=http://rapidshare.com/files/3785118923/lightview.zip]lighview mod,8-1-12,extract to root of drive[/download]