FNF/staticbits.thefnf.org
2
0
Fork 0
Code Pull Requests Packages Projects Releases Activity

big consolidation

Browse Source
This commit is contained in:
Charles N Wyble - admin
2022-09-27 00:51:15 -05:00
parent 4d61ad26bd
commit 50f2f1c644
509 changed files with 36567 additions and 7542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_ajax.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
// Since we get all URLs in one file, we simply add all items
// at once and set the size accordingly.
if (state != 'init')
return;
jQuery.get('dynamic_ajax.txt', function(data) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
});
};
function mycarousel_itemAddCallback(carousel, first, last, data)
{
// Simply add all items at once and set the size accordingly.
var items = data.split('|');
for (i = 0; i < items.length; i++) {
carousel.add(i+1, mycarousel_getItemHTML(items[i]));
}
carousel.size(items.length);
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="75" height="75" alt="" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemLoadCallback: mycarousel_itemLoadCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with dynamic content loading via Ajax</h3>
<p>
The data is loaded dynamically from a simple text file which contains the image urls.
</p>
<div id="mycarousel" class="jcarousel-skin-ie7">
<ul>
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
</div>
</body>
</html>

10
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_ajax.txt Normal file
View File

@@ -0,0 +1,10 @@
http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg|
http://static.flickr.com/75/199481072_b4a0d09597_s.jpg|
http://static.flickr.com/57/199481087_33ae73a8de_s.jpg|
http://static.flickr.com/77/199481108_4359e6b971_s.jpg|
http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg|
http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg|
http://static.flickr.com/58/199481218_264ce20da0_s.jpg|
http://static.flickr.com/69/199481255_fdfe885f87_s.jpg|
http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg|
http://static.flickr.com/70/229228324_08223b70fa_s.jpg

95
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_ajax_php.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
// Check if the requested items already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get(
'dynamic_ajax_php.php',
{
first: carousel.first,
last: carousel.last
},
function(xml) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
// Set the size of the carousel
carousel.size(parseInt(jQuery('total', xml).text()));
jQuery('image', xml).each(function(i) {
carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
});
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="75" height="75" alt="" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Uncomment the following option if you want items
// which are outside the visible range to be removed
// from the DOM.
// Useful for carousels with MANY items.
// itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
itemLoadCallback: mycarousel_itemLoadCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with dynamic content loading via Ajax</h3>
<p>
The data is loaded dynamically from a simple text file which contains the image urls.
</p>
<div id="mycarousel" class="jcarousel-skin-ie7">
<ul>
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
</div>
</body>
</html>

43
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_ajax_php.php Normal file
View File

@@ -0,0 +1,43 @@
<?php
// Array indexes are 0-based, jCarousel positions are 1-based.
$first = max(0, intval($_GET['first']) - 1);
$last = max($first + 1, intval($_GET['last']) - 1);
$length = $last - $first + 1;
// ---
$images = array(
'http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg',
'http://static.flickr.com/75/199481072_b4a0d09597_s.jpg',
'http://static.flickr.com/57/199481087_33ae73a8de_s.jpg',
'http://static.flickr.com/77/199481108_4359e6b971_s.jpg',
'http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg',
'http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg',
'http://static.flickr.com/58/199481218_264ce20da0_s.jpg',
'http://static.flickr.com/69/199481255_fdfe885f87_s.jpg',
'http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg',
'http://static.flickr.com/70/229228324_08223b70fa_s.jpg',
);
$total = count($images);
$selected = array_slice($images, $first, $length);
// ---
header('Content-Type: text/xml');
echo '<data>';
// Return total number of images so the callback
// can set the size of the carousel.
echo ' <total>' . $total . '</total>';
foreach ($selected as $img) {
echo ' <image>' . $img . '</image>';
}
echo '</data>';
?>

149
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_flickr_api.html Normal file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />
<style type="text/css">
#mycarousel .jcarousel-item-placeholder {
background: transparent url(images/loading-small.gif) 50% 50% no-repeat;
}
</style>
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
if (carousel.prevFirst != null) {
// Remove the last visible items to keep the list small
for (var i = carousel.prevFirst; i <= carousel.prevLast; i++) {
// jCarousel takes care not to remove visible items
carousel.remove(i);
}
}
var per_page = carousel.last - carousel.first + 1;
var currPage = 0;
var f,l;
var cr = carousel;
for (var i = carousel.first; i <= carousel.last; i++) {
var page = Math.ceil(i / per_page);
if (currPage != page) {
currPage = page;
f = ((page - 1) * per_page) + 1;
l = f + per_page - 1;
f = f < carousel.first ? carousel.first : f;
l = l > carousel.last ? carousel.last : l;
if (carousel.has(f, l)) {
continue;
}
mycarousel_makeRequest(carousel, f, l, per_page, page);
}
}
};
function mycarousel_makeRequest(carousel, first, last, per_page, page)
{
// Lock carousel until request has been made
carousel.lock();
jQuery.get(
'dynamic_flickr_api.php',
{
'per_page': per_page,
'page': page
},
function(data) {
mycarousel_itemAddCallback(carousel, first, last, data, page);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, first, last, data, page)
{
// Unlock
carousel.unlock();
// Set size
carousel.size($('photos', data).attr('total'));
var photos = $('photo', data);
var per_page = carousel.last - carousel.first + 1;
for (var i = first; i <= last; i++) {
var pos = i - 1;
var idx = Math.round(((pos / per_page) - Math.floor(pos / per_page)) * per_page);
carousel.add(i, mycarousel_getItemHTML(photos.get(idx)));
}
};
/**
* Global item html creation helper.
*/
function mycarousel_getItemHTML(photo)
{
var url = 'http://farm'+$(photo).attr('farm')+'.static.flickr.com/'+$(photo).attr('server')+'/'+$(photo).attr('id')+'_'+$(photo).attr('secret')+'_s.jpg';
return '<a href="http://www.flickr.com/photos/'+$(photo).attr('owner')+'/'+$(photo).attr('id')+'/" target="_blank" title="'+$(photo).attr('title')+'"><img src="' + url + '" border="0" width="75" height="75" alt="'+$(photo).attr('title')+'" /></a>';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemLoadCallback: mycarousel_itemLoadCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with dynamic content loading via Ajax from the Flickr API</h3>
<p>
The data is loaded dynamically from the <a href="http://flickr.com/services/api/">Flickr API</a>
method <a href="http://flickr.com/services/api/flickr.photos.getRecent.html">flickr.photos.getRecent</a>.
All items not in the visible range are removed from the list to keep the list small.
</p>
<p>
Note: There are constantly added new photos at flickr, so you possibly get different photos at certain positions.
</p>
<div id="mycarousel" class="jcarousel-skin-ie7">
<ul>
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
<p>
<strong>If you're using this example on your own server, don't forget to set your API key in dynamic_flickr_api.php!</strong>
</p>
</div>
</body>
</html>

29
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_flickr_api.php Normal file
View File

@@ -0,0 +1,29 @@
<?php
header('Content-type: text/xml; charset: utf-'.'8');
//header('Cache-Control: must-revalidate');
$api_key = '';
// This include sets my personal api key.
// Please remove this line and set your api key with the variable above.
// Get your own api key from http://www.flickr.com/services/api/keys/
include '../../config.flickr.php';
// Use the following url to get the most interesting photos.
// Since parameterless searches have been disabled, we have to add license=1,2,3,4,5
// to get the most interesting photos without search criteria.
// $url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&license=1,2,3,4,5,6&sort=interestingness-desc&api_key=' . $api_key;
$url = 'http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=' . $api_key;
if (!empty($_REQUEST['per_page'])) {
$url .= '&per_page=' . urlencode($_REQUEST['per_page']);
}
if (!empty($_REQUEST['page'])) {
$url .= '&page=' . urlencode($_REQUEST['page']);
}
echo file_get_contents($url);
?>

190
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_flickr_feed.html Normal file
View File

@@ -0,0 +1,190 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />
<!--
Custom styles
-->
<style type="text/css">
#mycarousel.jcarousel-container-horizontal {
width: 272px;
}
#mycarousel .jcarousel-clip-horizontal {
width: 272px;
height: 302px;
}
#mycarousel .jcarousel-item,
#mycarousel .jcarousel-item-placeholder {
width: 270px;
height: 300px;
}
#mycarousel .jcarousel-item-horizontal img {
border: 1px solid #808080;
}
#mycarousel .jcarousel-item-horizontal p {
margin: 5px;
text-align: center;
clear: both;
white-space: wrap;
}
#mycarousel .jcarousel-item-placeholder {
background: transparent url(images/loading.gif) 50% 50% no-repeat;
}
#mycarousel .jcarousel-next {
top: 150px;
right: 5px;
}
#mycarousel .jcarousel-prev {
top: 150px;
left: 5px;
}
#mycarousel form {
margin-top: 10px;
}
#mycarousel form label,
#mycarousel form small {
display: block;
}
</style>
<script type="text/javascript">
var mycarousel_tags = '';
function mycarousel_initCallback(carousel, state)
{
// Do nothing of state is 'reset'
if (state == 'reset')
return;
jQuery('form', carousel.container)
.bind('submit', function(e) {
mycarousel_tags = jQuery('input[type=text]', carousel.container).val();
carousel.reset();
return false;
});
};
function mycarousel_itemLoadCallback(carousel, state)
{
// Only load items if they don't already exist
if (carousel.has(carousel.first, carousel.last)) {
return;
}
jQuery.get(
'dynamic_flickr_feed.php',
{
tags: mycarousel_tags
},
function(data) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data.items);
},
'json'
);
};
function mycarousel_itemAddCallback(carousel, first, last, items)
{
if (first == 1) {
var plural = items.length == 1 ? '' : 's';
jQuery('.results', carousel.container).html(items.length + ' photo' + plural + ' found');
// Set size
if (items.length == 0) {
// Add a "no results" feedback as first item if items is empty
carousel.size(1);
carousel.add(1, '<p>No results</p>');
return;
} else {
carousel.size(items.length);
}
}
for (var i = first; i <= last; i++) {
if (items[i - 1] == undefined) {
break;
}
carousel.add(i, mycarousel_decodeEntities(items[i - 1].description));
}
};
/**
* Decodes entites.
*/
function mycarousel_decodeEntities(s)
{
return s.replace(/&amp;/g, "&")
.replace(/&quot;/g, '"')
.replace(/&#039;/g, "'")
.replace(/&lt;/g, "<")
.replace(/&gt;/g, ">");
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
itemLoadCallback: mycarousel_itemLoadCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with dynamic content loading via Ajax from the Flickr photo stream</h3>
<p>
The data is loaded dynamically from the <a href="http://www.flickr.com">Flickr</a>
public photos feed (format: <a href="http://api.flickr.com/services/feeds/photos_public.gne?format=json">JSON</a>)
and can be filtered by tags.
</p>
<div id="mycarousel" class="jcarousel-skin-ie7">
<ul>
<!-- The content will be dynamically loaded in here -->
</ul>
<form action="">
<label for="filter">Enter tag(s) to filter the feed<br />(separate multiple by comma)</label>
<input type="text" name="filter-tags" value="" />
<input type="submit" name="filter-submit" value="Filter" />
<small class="results"></small>
</form>
</div>
</div>
</body>
</html>

14
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_flickr_feed.php Normal file
View File

@@ -0,0 +1,14 @@
<?php
header('Content-type: application/json; charset: utf-'.'8');
//header('Cache-Control: must-revalidate');
$url = 'http://api.flickr.com/services/feeds/photos_public.gne?format=json&nojsoncallback=1';
if (!empty($_REQUEST['tags'])) {
$url .= '&tags=' . urlencode($_REQUEST['tags']);
}
echo file_get_contents($url);
?>

86
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/dynamic_javascript.html Normal file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />
<script type="text/javascript">
var mycarousel_itemList = [
{url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
{url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
{url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
{url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
{url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
{url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
{url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
{url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
{url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
{url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];
function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with dynamic content loading via JavaScript</h3>
<p>
The data is loaded dynamically from an javascript array.
</p>
<ul id="mycarousel" class="jcarousel-skin-ie7">
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
</body>
</html>

BIN
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/images/arrow-down.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 B

BIN
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/images/arrow-up.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 832 B

BIN
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/images/loading-small.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/images/loading-thickbox.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/images/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

71
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/special_easing.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
easing: 'BounceEaseOut',
animation: 1000
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with custom animation effect</h3>
<p>
This example shows how to use custom animation effects (uses <a href="http://www.robertpenner.com/easing/">Robert
Penners easing equations</a>).
</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>

72
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/special_flexible.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<style type="text/css">
/**
* Overwrite for having a carousel with dynamic width.
*/
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 85%;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 100%;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 4
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Flexible carousel</h3>
<p>
This example shows a carousel with flexible item width. In this case, always
4 items are visible (resize the browser window to see what happens).
</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>

192
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/special_textscroller.html Normal file
View File

@@ -0,0 +1,192 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
Custome styles
-->
<style type="text/css">
.jcarousel-container-vertical {
width: 300px;
height: 300px;
background: #e8e8e8;
border: 1px solid #fff;
}
.jcarousel-clip-vertical {
top: 15px;
width: 290px;
height: 270px;
margin: 0 5px;
z-index: 20;
}
#mycarousel li,
.jcarousel-item-vertical,
.jcarousel-item-placeholder-vertical {
width: 270px;
height: auto;
margin: 5px 0;
}
.jcarousel-item h3,
.jcarousel-item p {
margin: 0;
font-size: 90%;
}
.jcarousel-next-vertical {
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 14px;
cursor: pointer;
border-top: 1px solid #fff;
background: #4088b8 url(images/arrow-down.gif) no-repeat center;
}
.jcarousel-next-disabled-vertical {
cursor: default;
opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
}
.jcarousel-prev-vertical {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 14px;
cursor: pointer;
border-bottom: 1px solid #fff;
background: #4088b8 url(images/arrow-up.gif) no-repeat center;
}
.jcarousel-prev-disabled-vertical {
cursor: default;
opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
}
.loading {
background: transparent url(images/loading.gif) 50% 50% no-repeat;
}
</style>
<script type="text/javascript">
function mycarousel_initCallback(carousel, state)
{
// Lock until all items are loaded. That prevents jCarousel from
// setup correctly and we have to do that in the ajax callback
// function with carousel.setup().
// We're doing that because we don't know the exact height of each
// items until they are added to the list.
carousel.lock();
jQuery.get(
'special_textscroller.php',
{
'feed': 'http://jquery.com/blog/feed/atom/'
},
function(xml) {
mycarousel_itemAddCallback(carousel, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, xml)
{
var $items = jQuery('item', xml);
$items.each(function(i) {
carousel.add(i + 1, mycarousel_getItemHTML(this));
});
carousel.size($items.size());
// Unlock and setup.
carousel.unlock();
carousel.setup();
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
return '<h3><a href="'+$('link', item).text()+'">'+$('title', item).text()+'</a></h3><p>'+mycarousel_truncate($('description', item).text(), 90)+'</p>';
};
/**
* Utility function for truncating a string without breaking words.
*/
function mycarousel_truncate(str, length, suffix) {
if (str.length <= length) {
return str;
}
if (suffix == undefined) {
suffix = '...';
}
return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix;
};
jQuery(document).ready(function() {
/**
* We show a simple loading indicator
* using the jQuery ajax events
*/
jQuery().ajaxStart(function() {
jQuery(".jcarousel-clip-vertical").addClass('loading');
});
jQuery().ajaxStop(function() {
jQuery(".jcarousel-clip-vertical").removeClass('loading');
});
jQuery('#mycarousel').jcarousel({
vertical: true,
size: 0,
initCallback: mycarousel_initCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Using jCarousel as Textscroller</h3>
<p>
This example shows how to use jCarousel as a Textscroller. The data is loaded from the jQuery Blog RSS-Feed.
</p>
<div id="mycarousel">
<ul>
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
</div>
</body>
</html>

15
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/special_textscroller.php Normal file
View File

@@ -0,0 +1,15 @@
<?php
header('Content-Type: text/xml; charset: utf-'.'8');
if (!isset($_GET['feed'])) {
exit;
}
if (strpos($_GET['feed'], 'http://') !== 0) {
exit;
}
echo file_get_contents($_GET['feed']);
?>

102
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/special_thickbox.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
Thickbox 3 library
-->
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<!--
Thickbox stylesheet
-->
<link rel="stylesheet" type="text/css" href="thickbox/thickbox.css" />
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />
<script type="text/javascript">
// Set thickbox loading image
tb_pathToImage = "images/loading-thickbox.gif";
var mycarousel_itemList = [
{url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
{url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
{url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
{url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
{url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
{url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
{url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
{url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
{url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
{url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];
function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
// Create an object from HTML
var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
// Apply thickbox
tb_init(item);
carousel.add(i, item);
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>jCarousel and Thickbox 3</h3>
<p>
Example of jCarousel working together with <a href="http://jquery.com/demo/thickbox/">Thickbox 3</a>.
</p>
<ul id="mycarousel" class="jcarousel-skin-ie7">
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
</body>
</html>

79
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/static_auto.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with autoscrolling</h3>
<p>
Autoscrolling is enabled and the interval is set to <code>2</code> seconds.
Autoscrolling pauses when the user moves the cursor over the images and stops
when the user clicks the next or prev button. <code>wrap</code> is set to
<code>&quot;last&quot;</code>.
</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>

235
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/static_callbacks.html Normal file
View File

@@ -0,0 +1,235 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<style type="text/css">
/**
* Overwrite for having a carousel with dynamic width.
*/
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 85%;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 100%;
}
#display {
clear: both;
width: auto;
height: 250px;
overflow: scroll;
border: 1px solid #666;
background-color: #fcfcfc;
padding: 10px;
}
</style>
<script type="text/javascript">
/**
* This is the callback function which receives notification
* about the state of the next button.
*/
function mycarousel_buttonNextCallback(carousel, button, enabled) {
display('Next button is now ' + (enabled ? 'enabled' : 'disabled'));
};
/**
* This is the callback function which receives notification
* about the state of the prev button.
*/
function mycarousel_buttonPrevCallback(carousel, button, enabled) {
display('Prev button is now ' + (enabled ? 'enabled' : 'disabled'));
};
/**
* This is the callback function which receives notification
* right after initialisation of the carousel
*/
function mycarousel_initCallback(carousel, state) {
if (state == 'init')
display('Carousel initialised');
else if (state == 'reset')
display('Carousel reseted');
};
/**
* This is the callback function which receives notification
* right after reloading of the carousel
*/
function mycarousel_reloadCallback(carousel) {
display('Carousel reloaded');
};
/**
* This is the callback function which receives notification
* when an item becomes the first one in the visible range.
*/
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
display('Item #' + idx + ' is now the first item');
};
/**
* This is the callback function which receives notification
* when an item is no longer the first one in the visible range.
*/
function mycarousel_itemFirstOutCallback(carousel, item, idx, state) {
display('Item #' + idx + ' is no longer the first item');
};
/**
* This is the callback function which receives notification
* when an item becomes the first one in the visible range.
*/
function mycarousel_itemLastInCallback(carousel, item, idx, state) {
display('Item #' + idx + ' is now the last item');
};
/**
* This is the callback function which receives notification
* when an item is no longer the first one in the visible range.
*/
function mycarousel_itemLastOutCallback(carousel, item, idx, state) {
display('Item #' + idx + ' is no longer the last item');
};
/**
* This is the callback function which receives notification
* when an item becomes the first one in the visible range.
* Triggered before animation.
*/
function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
// No animation on first load of the carousel
if (state == 'init')
return;
jQuery('img', item).fadeIn('slow');
};
/**
* This is the callback function which receives notification
* when an item becomes the first one in the visible range.
* Triggered after animation.
*/
function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
display('Item #' + idx + ' is now visible');
};
/**
* This is the callback function which receives notification
* when an item is no longer the first one in the visible range.
* Triggered before animation.
*/
function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
jQuery('img', item).fadeOut('slow');
};
/**
* This is the callback function which receives notification
* when an item is no longer the first one in the visible range.
* Triggered after animation.
*/
function mycarousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {
display('Item #' + idx + ' is no longer visible');
};
/**
* Helper function for printing out debug messages.
* Not needed for jCarousel.
*/
var row = 1;
function display(s) {
// Log to Firebug (getfirebug.com) if available
//if (window.console != undefined && typeof window.console.log == 'function')
// console.log(s);
if (row >= 1000)
var r = row;
else if (row >= 100)
var r = '&nbsp;' + row;
else if (row >= 10)
var r = '&nbsp;&nbsp;' + row;
else
var r = '&nbsp;&nbsp;&nbsp;' + row;
jQuery('#display').html(jQuery('#display').html() + r + ': ' + s + '<br />').get(0).scrollTop += 10000;
row++;
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
reloadCallback: mycarousel_reloadCallback,
buttonNextCallback: mycarousel_buttonNextCallback,
buttonPrevCallback: mycarousel_buttonPrevCallback,
itemFirstInCallback: mycarousel_itemFirstInCallback,
itemFirstOutCallback: mycarousel_itemFirstOutCallback,
itemLastInCallback: mycarousel_itemLastInCallback,
itemLastOutCallback: mycarousel_itemLastOutCallback,
itemVisibleInCallback: {
onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
onAfterAnimation: mycarousel_itemVisibleInCallbackAfterAnimation
},
itemVisibleOutCallback: {
onBeforeAnimation: mycarousel_itemVisibleOutCallbackBeforeAnimation,
onAfterAnimation: mycarousel_itemVisibleOutCallbackAfterAnimation
}
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel illustrating the callback functions</h3>
<p>
This carousel has registered all available callback functions and displays
information about the state of the items and buttons. Additionally the width
of the carousel is set to auto. Resize the browser window and see what happens.
</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
<p id="display"></p>
</div>
</body>
</html>

56
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/static_circular.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap: 'circular'
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Circular carousel</h3>
<p>
This example shows a simple circular carousel.
</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>

166
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/static_controls.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<style type="text/css">
/**
* Additional styles for the controls.
*/
.jcarousel-control {
margin-bottom: 10px;
text-align: center;
}
.jcarousel-control a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold;
}
.jcarousel-control a:focus,
.jcarousel-control a:active {
outline: none;
}
.jcarousel-scroll {
margin-top: 10px;
text-align: center;
}
.jcarousel-scroll form {
margin: 0;
padding: 0;
}
.jcarousel-scroll select {
font-size: 75%;
}
#mycarousel-next,
#mycarousel-prev {
cursor: pointer;
margin-bottom: -10px;
text-decoration: underline;
font-size: 11px;
}
</style>
<script type="text/javascript">
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function() {
jQuery("#mycarousel").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with external controls</h3>
<p>
This carousel shows how to control it from outside.
</p>
<div id="mycarousel" class="jcarousel-skin-tango">
<div class="jcarousel-control">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
<ul>
<li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
<li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>
</ul>
<div class="jcarousel-scroll">
<form action="">
<a href="#" id="mycarousel-prev">&laquo; Prev</a>
<select>
<option value="1">Scroll 1 item per click</option>
<option value="2">Scroll 2 items per click</option>
<option value="3">Scroll 3 items per click</option>
<option value="4">Scroll 4 items per click</option>
<option value="5">Scroll 5 items per click</option>
</select>
<a href="#" id="mycarousel-next">Next &raquo;</a>
</form>
</div>
</div>
</div>
</body>
</html>

95
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/static_multiple.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheets
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
jQuery('.first-and-second-carousel').jcarousel();
// If you want to use a caoursel with different configuration options,
// you have to initialise it seperately.
// We do it by an id selector here.
jQuery('#third-carousel').jcarousel({
vertical: true
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Multiple carousels on one page</h3>
<p>
This example shows how to use multiple carousels on one page with different
skins and configurations.
</p>
<ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
<hr size="1"/>
<ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-ie7">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
<hr size="1"/>
<ul id="third-carousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>

54
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/static_simple.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Simple carousel</h3>
<p>
This is the most simple usage of the carousel with no configuration options.
</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>

53
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/static_start.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
start: 3
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Carousel with custom start position</h3>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>

57
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/static_vertical.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 2
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Vertical carousel</h3>
<p>
A carousel in vertical orientation with custom prev/next controls, <code>animation</code>
set to <code>"slow"</code> and <code>scroll</code> set to <code>2</code>.
</p>
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>

159
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/thickbox/thickbox.css Normal file
View File

@@ -0,0 +1,159 @@
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
height:100%;
width:100%;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
padding:15px;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}

296
fnf2014/js/jsor-jcarousel-7bb2e0a/examples/thickbox/thickbox.js Normal file
View File

@@ -0,0 +1,296 @@
/*
* Thickbox 3 - One Box To Rule Them All.
* By Cody Lindley (http://www.codylindley.com)
* Copyright (c) 2007 cody lindley
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/
var tb_pathToImage = "images/loadingAnimation.gif";
/*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/
//on page load call tb_init
$(document).ready(function(){
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;
});
//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
$(domChunk).click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
});
}
function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
try {
if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
$("body","html").css({height: "100%", width: "100%"});
$("html").css("overflow","hidden");
if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove);
}
}else{//all others
if(document.getElementById("TB_overlay") === null){
$("body").append("<div id='TB_overlay'></div><div id='TB_window'>");
$("#TB_overlay").click(tb_remove);
}
}
if(caption===null){caption="";}
$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
$('#TB_load').show();//show loader
var baseURL;
if(url.indexOf("?")!==-1){ //ff there is a query string involved
baseURL = url.substr(0, url.indexOf("?"));
}else{
baseURL = url;
}
var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;
var urlType = baseURL.toLowerCase().match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
TB_PrevCaption = "";
TB_PrevURL = "";
TB_PrevHTML = "";
TB_NextCaption = "";
TB_NextURL = "";
TB_NextHTML = "";
TB_imageCount = "";
TB_FoundURL = false;
if(imageGroup){
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {
var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
if (!(TB_TempArray[TB_Counter].href == url)) {
if (TB_FoundURL) {
TB_NextCaption = TB_TempArray[TB_Counter].title;
TB_NextURL = TB_TempArray[TB_Counter].href;
TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>Next &gt;</a></span>";
} else {
TB_PrevCaption = TB_TempArray[TB_Counter].title;
TB_PrevURL = TB_TempArray[TB_Counter].href;
TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; Prev</a></span>";
}
} else {
TB_FoundURL = true;
TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
}
}
}
imgPreloader = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;
// Resizing large images - orginal by Christian Montoya edited by me.
var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}
// End Resizing
TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");
$("#TB_closeWindowButton").click(tb_remove);
if (!(TB_PrevHTML === "")) {
function goPrev(){
if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);}
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
return false;
}
$("#TB_prev").click(goPrev);
}
if (!(TB_NextHTML === "")) {
function goNext(){
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
tb_show(TB_NextCaption, TB_NextURL, imageGroup);
return false;
}
$("#TB_next").click(goNext);
}
document.onkeydown = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
tb_remove();
} else if(keycode == 190){ // display previous image
if(!(TB_NextHTML == "")){
document.onkeydown = "";
goNext();
}
} else if(keycode == 188){ // display next image
if(!(TB_PrevHTML == "")){
document.onkeydown = "";
goPrev();
}
}
};
tb_position();
$("#TB_load").remove();
$("#TB_ImageOff").click(tb_remove);
$("#TB_window").css({display:"block"}); //for safari using css instead of show
};
imgPreloader.src = url;
}else{//code to show html pages
var queryString = url.replace(/^[^\?]+\??/,'');
var params = tb_parseQuery( queryString );
TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
if(url.indexOf('TB_iframe') != -1){
urlNoQuery = url.split('TB_');
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' onload='tb_showIframe()'> </iframe>");
}else{
if($("#TB_window").css("display") != "block"){
if(params['modal'] != "true"){
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");
}else{
$("#TB_overlay").unbind();
$("#TB_window").append("<div id='TB_ajaxContent' class='TB_modal' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
}
}else{
$("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";
$("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";
$("#TB_ajaxContent")[0].scrollTop = 0;
$("#TB_ajaxWindowTitle").html(caption);
}
}
$("#TB_closeWindowButton").click(tb_remove);
if(url.indexOf('TB_inline') != -1){
$("#TB_ajaxContent").html($('#' + params['inlineId']).html());
tb_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}else if(url.indexOf('TB_iframe') != -1){
tb_position();
if(frames['TB_iframeContent'] === undefined){//be nice to safari
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
$(document).keyup( function(e){ var key = e.keyCode; if(key == 27){tb_remove();}});
}
}else{
$("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method
tb_position();
$("#TB_load").remove();
tb_init("#TB_ajaxContent a.thickbox");
$("#TB_window").css({display:"block"});
});
}
}
if(!params['modal']){
document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
tb_remove();
}
};
}
} catch(e) {
//nothing here
}
}
//helper functions below
function tb_showIframe(){
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}
function tb_remove() {
$("#TB_imageOff").unbind("click");
$("#TB_overlay").unbind("click");
$("#TB_closeWindowButton").unbind("click");
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
$("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$("html").css("overflow","");
}
document.onkeydown = "";
return false;
}
function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function')) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
}
function tb_parseQuery ( query ) {
var Params = {};
if ( ! query ) {return Params;}// return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
function tb_getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
arrayPageSize = [w,h];
return arrayPageSize;
}