mirror of
https://github.com/e107inc/e107.git
synced 2025-01-17 12:48:24 +01:00
General cleanup
This commit is contained in:
CaMer0n
parent
0940da5af2
commit
21d53a27b4
@ -1,87 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'/>
|
||||
<title>ColorBox Examples</title>
|
||||
<style>
|
||||
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
|
||||
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
|
||||
h2{font-size:13px; margin:15px 0 0 0;}
|
||||
</style>
|
||||
<link rel="stylesheet" href="colorbox.css" />
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script src="../colorbox/jquery.colorbox.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
//Examples of how to assign the ColorBox event to elements
|
||||
$(".group1").colorbox({rel:'group1'});
|
||||
$(".group2").colorbox({rel:'group2', transition:"fade"});
|
||||
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
|
||||
$(".group4").colorbox({rel:'group4', slideshow:true});
|
||||
$(".ajax").colorbox();
|
||||
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
|
||||
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
|
||||
$(".inline").colorbox({inline:true, width:"50%"});
|
||||
$(".callbacks").colorbox({
|
||||
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
|
||||
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
|
||||
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
|
||||
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
|
||||
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
|
||||
});
|
||||
|
||||
//Example of preserving a JavaScript event for inline calls.
|
||||
$("#click").click(function(){
|
||||
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ColorBox Demonstration</h1>
|
||||
|
||||
<h2>Elastic Transition</h2>
|
||||
<p><a class="group1" data-rel='hi' href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
||||
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
||||
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
||||
|
||||
<h2>Fade Transition</h2>
|
||||
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
|
||||
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
||||
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
||||
|
||||
<h2>No Transition + fixed width and height (75% of screen size)</h2>
|
||||
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
||||
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
||||
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
||||
|
||||
<h2>Slideshow</h2>
|
||||
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
|
||||
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
|
||||
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
|
||||
|
||||
<h2>Other Content Types</h2>
|
||||
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
|
||||
<p><a class='ajax' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
|
||||
<p><a class='youtube' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&wmode=transparent" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
|
||||
<p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p>
|
||||
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
|
||||
|
||||
<h2>Demonstration of using callbacks</h2>
|
||||
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
|
||||
|
||||
<!-- This contains the hidden content for inline calls -->
|
||||
<div style='display:none'>
|
||||
<div id='inline_content' style='padding:10px; background:#fff;'>
|
||||
<p><strong>This content comes from a hidden element on this page.</strong></p>
|
||||
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
|
||||
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
|
||||
|
||||
<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
|
||||
<p>Updating Content Example:<br />
|
||||
<a class="ajax" href="../content/flash.html">Click here to load new content</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,916 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="-1">
|
||||
<meta name="keywords" content="jquery,rating,raty,voto,star,staring,classificacao,classificar,votar,plugin" />
|
||||
<meta name="description" content="jQuery Raty - A Star Rating Plugin" />
|
||||
|
||||
<title>jQuery Raty - A Star Rating Plugin</title>
|
||||
|
||||
<!-- This CSS does not belong to the plugin. -->
|
||||
<link type="text/css" rel="stylesheet" href="doc/css/stylesheet.css"/>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="js/jquery.raty.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
// This code does NOT belong the plugin. See the example code at the bottom of this page.
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-194992347-3']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<div id="title">
|
||||
<a href="http://wbotelhos.com/raty">jQuery Raty - A Star Rating Plugin</a>
|
||||
<span id="version">(current version: 2.4.5)</span>
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<a href="http://github.com/downloads/wbotelhos/raty/jquery.raty-2.4.5.zip" target="_blank">Download</a> |
|
||||
<a href="http://github.com/wbotelhos/raty" target="_blank">Github</a> |
|
||||
<a href="http://www.wbotelhos.com/raty/changelog.md" target="_blank">Change Log</a> |
|
||||
<a href="http://www.wbotelhos.com/raty/README.md" target="_blank">Readme</a> |
|
||||
<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin" target="_blank">Article</a> |
|
||||
<a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">License</a> |
|
||||
<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin#comments" target="_blank" style="color: #2C8CBD;">Doubt</a> |
|
||||
<a href="http://www.wbotelhos.com/lab" target="_blank" style="color: #000;">yLab</a>
|
||||
</div>
|
||||
|
||||
<a id="coffee" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=X8HEP2878NDEG&item_name=jQuery%20Raty" target="_blank">buy me a coffee</a>
|
||||
|
||||
<div class="description">jQuery <strong>Raty</strong> is a plugin that generates a customizable star rating.</div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="default-demo" class="session-first">Default options:</div>
|
||||
|
||||
<div id="default"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty();<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div>
|
||||
|
||||
<div id="fixed-demo" class="session">Started with a score and read only value:</div>
|
||||
<div id="fixed"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  readOnly : true,<br/>
|
||||
  score    : 2<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div>
|
||||
|
||||
<div id="score-demo" class="session">Starting with a callback:</div>
|
||||
<div id="score" data-rating="3"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#score').raty({<br/>
|
||||
  score: function() {<br/>
|
||||
    return $(this).attr('data-rating');<br/>
|
||||
  }<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star" data-rating="3"></div>
|
||||
</div>
|
||||
|
||||
<div id="anyone-demo" class="session">A hint for no rated elements when it's read-only:</div>
|
||||
<div id="anyone"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  readOnly   : true,<br/>
|
||||
  noRatedMsg : 'anyone rated this product yet!'<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div>
|
||||
|
||||
<div id="number-demo" class="session">Custom score name and a number of stars:</div>
|
||||
<div id="number"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  scoreName : 'entity.score',<br/>
|
||||
  number    : 10<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div>
|
||||
|
||||
<div id="click-demo" class="session">Using click function:</div>
|
||||
<div id="click"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  click: function(score, evt) {<br/>
|
||||
    alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);<br/>
|
||||
  }<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- The argument score is the selected value;<br/>
|
||||
- The argument evt is the click event;<br/>
|
||||
- You can mension the star element (DOM) itself using 'this'.<br/>
|
||||
</span>
|
||||
|
||||
<div id="cancel-demo" class="session">Default cancel button:</div>
|
||||
<div id="cancel"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  cancel: true<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- The score value for the click on cancel button is null.<br/>
|
||||
</span>
|
||||
|
||||
<div id="cancel-custom-demo" class="session">Custom cancel button:</div>
|
||||
<div id="cancel-custom"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  cancel      : true,<br/>
|
||||
  cancelHint  : 'remove my rating!',<br/>
|
||||
  cancelPlace : 'right',<br/>
|
||||
  click       : function(score, evt) {<br/>
|
||||
    alert('score: ' + score);<br/>
|
||||
  }<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div>
|
||||
|
||||
<div id="half-demo" class="session">Half star voting:</div>
|
||||
<div id="half"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  half  : true,<br/>
|
||||
  score : 3.3<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- You can disable the 'halfShow' option to just vote with half star but not show it.<br/>
|
||||
- If 'halfShow' is disabled, then score >= x.6 will be rounded up visually.<br/>
|
||||
- The interval can be:<br/>
|
||||
-- Rounded down: [x.00 .. x.25]<br/>
|
||||
-- Half star:    [x.26 .. x.75]<br/>
|
||||
-- Rounded up:   [x.76 .. x.99]
|
||||
</span>
|
||||
|
||||
<div id="round-demo" class="session">Custom round option:</div>
|
||||
<div id="round"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  score : 1.26,<br/>
|
||||
  round : { down: .25, full: .6, up: .76 }<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- This example use the default round values;<br/>
|
||||
- down: with halfShow enabled, score <= x.25 will be rounded down; (inclusive)<br/>
|
||||
- up: with halfShow enabled, score >= x.76 will be rounded up; (inclusive)<br/>
|
||||
- down-up: with halfShow enabled, score > x.25 and score < .76 will be half star; (inclusive)<br/>
|
||||
- full: with halfShow disabled, score >= x.6 will be rounded up; (inclusive)<br/>
|
||||
</span>
|
||||
|
||||
<div id="icon-demo" class="session">Custom hint and icons:</div>
|
||||
<div id="icon"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  hints   : ['a', '', null, 'd', '5'],<br/>
|
||||
  starOn  : 'medal-on.png',<br/>
|
||||
  starOff : 'medal-off.png'<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- To display the number of the star, set null.
|
||||
</span>
|
||||
|
||||
<div id="range-demo" class="session">Range of custom icons:</div>
|
||||
<div id="range"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  iconRange: [<br/>
|
||||
    { range: 2, on: 'face-a.png', off: 'face-a-off.png' },<br/>
|
||||
    { range: 3, on: 'face-b.png', off: 'face-b-off.png' },<br/>
|
||||
    { range: 4, on: 'face-c.png', off: 'face-c-off.png' },<br/>
|
||||
    { range: 5, on: 'face-d.png', off: 'face-d-off.png' }<br/>
|
||||
  ]<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- It's a array of objects where each one represents a custom icon;<br/>
|
||||
- The value range is until wich position the icon will be displayed;<br/>
|
||||
- The value on is the active icon;<br/>
|
||||
- The value off is the inactive icon;<br/>
|
||||
- The sequence of the range interval should be in a ascending order;<br/>
|
||||
- If the value on or off is omitted then the attribute starOn or starOff will be used.
|
||||
</span>
|
||||
|
||||
<div id="big-demo" class="session">Bigger icon:</div>
|
||||
<div id="big"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  cancel    : true,<br/>
|
||||
  cancelOff : 'cancel-off-big.png',<br/>
|
||||
  cancelOn  : 'cancel-on-big.png',<br/>
|
||||
  half      : true,<br/>
|
||||
  size      : 24,<br/>
|
||||
  starHalf  : 'star-half-big.png',<br/>
|
||||
  starOff   : 'star-off-big.png',<br/>
|
||||
  starOn    : 'star-on-big.png'<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- You can specify your own width as following: width: 120.
|
||||
</span>
|
||||
|
||||
<div id="group-demo" class="session">Group of elements:</div>
|
||||
<div class="group"></div>
|
||||
<div class="group"></div>
|
||||
<div class="group"></div>
|
||||
|
||||
<div class="source">
|
||||
$('.star').raty();<br/><br/>
|
||||
|
||||
<div class="star"></div><br/>
|
||||
<div class="star"></div><br/>
|
||||
<div class="star"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- The ID is optional and must be unique;<br/>
|
||||
- If you don't pass a ID for the element, then it will be created.
|
||||
</span>
|
||||
|
||||
<div id="target-demo" class="session">Displaying hint in a target element:</div>
|
||||
|
||||
<div id="target"></div>
|
||||
<div id="hint"></div><br/>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  cancel     : true,<br/>
|
||||
  cancelHint : 'none',<br/>
|
||||
  target     : '#hint'<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div><br/>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
||||
<div id="target-number-demo" class="session">Displaying and keeping the score in a target element:</div>
|
||||
|
||||
<div id="target-number"></div>
|
||||
|
||||
<select id="score-target">
|
||||
<option value="">--</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
|
||||
<div class="source left">
|
||||
$('#star').raty({<br/>
|
||||
  cancel     : true,<br/>
|
||||
  target     : '#score',<br/>
|
||||
  targetKeep : true,<br/>
|
||||
  targetType : 'number'<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<select id="target"><br/>
|
||||
  <option value="">0</option><br/>
|
||||
  <option value="1">1</option><br/>
|
||||
  <option value="2">2</option><br/>
|
||||
  <option value="3">3</option><br/>
|
||||
  <option value="4">4</option><br/>
|
||||
  <option value="5">5</option><br/>
|
||||
</select><br/>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- You can to choose the target types 'hint' or 'number'.
|
||||
</span>
|
||||
|
||||
<div id="target-out-demo" class="session">Setting default value to the target on mouseout:</div>
|
||||
|
||||
<div id="target-out"></div>
|
||||
<div id="hint-out"></div><br/>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  target     : '#hint',<br/>
|
||||
  targetText : '--'<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div><br/>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
||||
<div id="format-demo" class="session">Displaying hint with format template:</div>
|
||||
|
||||
<div id="format"></div>
|
||||
<div id="hint-format"></div><br/>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  cancel       : true,<br/>
|
||||
  cancelHint   : 'Sure?',<br/>
|
||||
  target       : '#hint',<br/>
|
||||
  targetFormat : 'your score: {score}',<br/>
|
||||
  targetText   : 'none',<br/>
|
||||
  targetKeep   : true<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div><br/>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
||||
<div id="mouseover-demo" class="session">Using mouseover callback:</div>
|
||||
|
||||
<div id="mouseover"></div>
|
||||
<div id="mouseover-target"></div><br/>
|
||||
|
||||
<div class="source" style="margin-top: 15px;">
|
||||
$('#star').raty({<br/>
|
||||
  cancel    : true,<br />
|
||||
  mouseover : function(score, evt) {<br />
|
||||
    var target = $('#mouseover-target');<br /><br />
|
||||
|
||||
    if (score === null) {<br />
|
||||
      target.html('Boring!');<br />
|
||||
    } else if (score === undefined) {<br />
|
||||
      target.empty();<br />
|
||||
    } else {<br />
|
||||
      target.html('score: ' + score);<br />
|
||||
    }<br />
|
||||
  }<br />
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div><br/>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
||||
<span class="comment">
|
||||
- The options target, targetFormat, targetKeep, targetText and targetType are abstractions of this callback.
|
||||
</span>
|
||||
|
||||
<div id="precision-demo" class="session">Half star voting precision:</div>
|
||||
|
||||
<div id="precision"></div>
|
||||
<div id="precision-target"></div><br/>
|
||||
|
||||
<div class="source" style="margin-top: 15px;">
|
||||
$('#star').raty({<br/>
|
||||
  half       : true,<br/>
|
||||
  precision  : true,<br/>
|
||||
  size       : 24,<br/>
|
||||
  starHalf   : 'star-half-big.png',<br/>
|
||||
  starOff    : 'star-off-big.png',<br/>
|
||||
  starOn     : 'star-on-big.png'<br/>
|
||||
  target     : '#precision-target'<br/>
|
||||
  targetType : 'number'<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div><br/>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
||||
<div id="space-demo" class="session">Without space between stars:</div>
|
||||
|
||||
<div id="space"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  space: false<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div><br/>
|
||||
</div>
|
||||
|
||||
<div id="single-demo" class="session">Single icon:</div>
|
||||
|
||||
<div id="single"></div>
|
||||
|
||||
<div class="source">
|
||||
$('#star').raty({<br/>
|
||||
  single: true<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div id="star"></div><br/>
|
||||
</div>
|
||||
|
||||
<div id="action-demo" class="session">Directed actions with public functions:</div>
|
||||
|
||||
love:
|
||||
<div class="action"></div>
|
||||
|
||||
happy:
|
||||
<div class="action"></div><br/>
|
||||
|
||||
your last rate:
|
||||
<div id="result"></div>
|
||||
|
||||
<div class="source">
|
||||
$('.star').raty({<br/>
|
||||
  half  : true,<br/>
|
||||
  click : function(score, evt) {<br/>
|
||||
    $(this).raty('cancel');<br/>
|
||||
    $('#result').raty('score', score);<br/>
|
||||
  }<br/>
|
||||
});<br/><br/>
|
||||
|
||||
<div class="star"></div><br/>
|
||||
<div class="star"></div><br/><br/>
|
||||
<div id="result"></div>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- All functions have a optional second parameter to specify which container will be executed;<br/>
|
||||
- You can pass a ID or a class to be the target of the action;<br/>
|
||||
- If the ID or class are not specified, then the last element Raty will be takes.
|
||||
</span>
|
||||
|
||||
<div id="function-demo" class="session">Functions Demo:</div>
|
||||
|
||||
<div id="function"></div>
|
||||
<div id="hint-function"></div><br/>
|
||||
|
||||
<div style="color: #CCC; margin-top: 15px;">
|
||||
<a href="javascript:void(0);" title="1" class="score">Score 1</a> |
|
||||
<a href="javascript:void(0);" title="2" class="score">Score 2</a> |
|
||||
<a href="javascript:void(0);" title="3" class="score">Score 3</a> |
|
||||
<a href="javascript:void(0);" title="4" class="score">Score 4</a> |
|
||||
<a href="javascript:void(0);" title="5" class="score">Score 5</a>
|
||||
</div>
|
||||
|
||||
<div style="color: #CCC; margin-top: 15px;">
|
||||
<a href="javascript:void(0);" title="1" class="click">Click 1</a> |
|
||||
<a href="javascript:void(0);" title="2" class="click">Click 2</a> |
|
||||
<a href="javascript:void(0);" title="3" class="click">Click 3</a> |
|
||||
<a href="javascript:void(0);" title="4" class="click">Click 4</a> |
|
||||
<a href="javascript:void(0);" title="5" class="click">Click 5</a>
|
||||
</div>
|
||||
|
||||
<div style="color: #CCC; margin-top: 15px;">
|
||||
<a href="javascript:void(0);" title="true" class="readOnly">ReadOnly (true)</a> |
|
||||
<a href="javascript:void(0);" title="false" class="readOnly">ReadOnly (false)</a>
|
||||
</div>
|
||||
|
||||
<div style="color: #CCC; margin-top: 15px;">
|
||||
<a href="javascript:void(0);" title="false" class="cancel">Cancel</a> |
|
||||
<a href="javascript:void(0);" title="true" class="cancel">Cancel (trigger)</a>
|
||||
</div>
|
||||
|
||||
<div style="color: #CCC; margin-top: 15px;">
|
||||
<a id="reload" href="javascript:void(0);" title="reload">Reload</a> |
|
||||
<a id="get-score" href="javascript:void(0);" title="score">Score</a>
|
||||
</div>
|
||||
|
||||
<div class="action-wrapper">
|
||||
settings: <input id="set-id" type="text" value="{ number: 3 }" class="action-field" />
|
||||
<a id="set-action" href="javascript:void(0);" title="set" class="action-link">set</a>
|
||||
</div>
|
||||
|
||||
<div id="global-demo" class="session">Changing the settings globally:</div>
|
||||
|
||||
<div class="source">
|
||||
$.fn.raty.defaults.starOn = 'star-on.gif';<br/>
|
||||
$.fn.raty.defaults.starOff = 'star-off.gif';
|
||||
</div>
|
||||
|
||||
<span class="comment">
|
||||
- You can change any option mention the scope <b>$.fn.raty.defaults.</b> + <i>option_name</i>;<br/>
|
||||
- This setup must be called before you bind the Raty, of course.
|
||||
</span>
|
||||
|
||||
<div class="session">Default options:</div>
|
||||
|
||||
<div class="session-option">cancel: <span>false</span></div>
|
||||
<div class="comment">If will be showed a button to cancel the rating.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">cancelHint: <span>'cancel this rating!'</span></div>
|
||||
<div class="comment">The hint information.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">cancelHint: 'cancel this rating!'<br/>
|
||||
<div class="comment">The hint information.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">cancelOff: <span>'cancel-off.png'</span></div>
|
||||
<div class="comment">Name of the cancel image off.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">cancelOn: <span>'cancel-on.png'</span></div>
|
||||
<div class="comment">Name of the cancel image on.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">cancelPlace: <span>'left'</span></div>
|
||||
<div class="comment">Position of the cancel button.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">click: <span>undefined</span></div>
|
||||
<div class="comment">Function that returns the selected value.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">half: <span>false</span></div>
|
||||
<div class="comment">Enables half star selection.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">halfShow: <span>true</span></div>
|
||||
<div class="comment">Enables half star display.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">hints: <span>['bad', 'poor', 'regular', 'good', 'gorgeous']</span></div>
|
||||
<div class="comment">List of names that will be used as a hint on each star.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">iconRange: <span>undefined</span></div>
|
||||
<div class="comment">List of object that represent each icon with position and names.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">noRatedMsg: <span>'not rated yet'</span></div>
|
||||
<div class="comment">A hint for no rated elements when it's read-only.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">number: <span>5</span></div>
|
||||
<div class="comment">Number of stars that will be presented.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">path: <span>'img/'</span></div>
|
||||
<div class="comment">A range of custom icons that you can set.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">precision: <span>false</span></div>
|
||||
<div class="comment">Enables the selection of a precision score.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">readOnly: <span>false</span></div>
|
||||
<div class="comment">If the stars will be read-only.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">round: <span>{ down: <span>.25, full: <span>.6, up: <span>.76 }</span></div>
|
||||
<div class="comment">Configuration to set the round rules.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">score: <span>undefined</span></div>
|
||||
<div class="comment">Number of stars to be selected.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">scoreName: <span>'score'</span></div>
|
||||
<div class="comment">Name of the hidden field that holds the score value.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">single: <span>false</span></div>
|
||||
<div class="comment">Enables the single star selection.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">space: <span>true</span></div>
|
||||
<div class="comment">Puts space between the stars.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">size: <span>16</span></div>
|
||||
<div class="comment">The icons size.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">starHalf: <span>'star-half.png'</span></div>
|
||||
<div class="comment">The name of the half star image.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">starOff: <span>'star-off.png'</span></div>
|
||||
<div class="comment">Name of the star image off.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">starOn: <span>'star-on.png'</span></div>
|
||||
<div class="comment">Name of the star image on.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">target: <span>undefined</span></div>
|
||||
<div class="comment">Element selector where the rating will be displayed.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">targetFormat: <span>'{score}'</span></div>
|
||||
<div class="comment">Template to interpolate the score with some thing.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">targetKeep: <span>false</span></div>
|
||||
<div class="comment">If the last choose value will be keeped on mouseout.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">targetText: <span>''</span></div>
|
||||
<div class="comment">Default value when there is no score or targetKeep is off.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">targetType: <span>'hint'</span></div>
|
||||
<div class="comment">What display on target element hint or number.</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="session-option">width : <span>undefined</span></div>
|
||||
<div class="comment">The container width of the stars.</div>
|
||||
|
||||
<div class="session">Functions:</div>
|
||||
|
||||
<div class="source">$('#star').raty('score');</div>
|
||||
<div class="comment">Recovers the current score or undefined for no rated. Class returns an array of score</div>
|
||||
|
||||
<div class="source">$('#star').raty('score', 3);</div>
|
||||
<div class="comment">Set the score with 3 stars.</div>
|
||||
|
||||
<div class="source">$('#star').raty('click', 2);</div>
|
||||
<div class="comment">Click on the second star of the Raty with ID called 'raty'.</div>
|
||||
|
||||
<div class="source">$('.star').raty('readOnly', true);</div>
|
||||
<div class="comment">Adjusts all Raty with class called 'raty' for read-only.</div>
|
||||
|
||||
<div class="source">$('#star').raty('cancel', true);</div>
|
||||
<div class="comment">Cancel the rating. The second optional parameter enable thes click callback.</div>
|
||||
|
||||
<div class="source">$('#star').raty('reload');</div>
|
||||
<div class="comment">Reload the rating with the current configuration.</div>
|
||||
|
||||
<div class="source">$('#star').raty('set', { number: 10 });</div>
|
||||
<div class="comment">Reload the rating applying new configurations.</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div id="copy">© 2010 <a href="http://www.wbotelhos.com/" target="_blank">wbotelhos.com</a></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$('#default').raty();
|
||||
|
||||
$('#fixed').raty({
|
||||
readOnly : true,
|
||||
score : 2
|
||||
});
|
||||
|
||||
$('#score').raty({
|
||||
score: function() {
|
||||
return $(this).attr('data-rating');
|
||||
}
|
||||
});
|
||||
|
||||
$('#anyone').raty({
|
||||
readOnly : true,
|
||||
noRatedMsg : 'anyone rated this product yet!'
|
||||
});
|
||||
|
||||
$('#number').raty({
|
||||
scoreName : 'entity.score',
|
||||
number : 10
|
||||
});
|
||||
|
||||
$('#click').raty({
|
||||
click: function(score, evt) {
|
||||
alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);
|
||||
}
|
||||
});
|
||||
|
||||
$('#cancel').raty({
|
||||
cancel: true
|
||||
});
|
||||
|
||||
$('#cancel-custom').raty({
|
||||
cancel : true,
|
||||
cancelHint : 'remove my rating!',
|
||||
cancelPlace : 'right',
|
||||
click : function(score, evt) {
|
||||
alert('score: ' + score);
|
||||
}
|
||||
});
|
||||
|
||||
$('#half').raty({
|
||||
half : true,
|
||||
score : 3.3
|
||||
});
|
||||
|
||||
$('#round').raty({
|
||||
score : 1.26,
|
||||
round : { down: .25, full: .6, up: .76 }
|
||||
});
|
||||
|
||||
$('#icon').raty({
|
||||
hints : ['a', '', null, 'd', '5'],
|
||||
path : 'doc/img/',
|
||||
starOn : 'medal-on.png',
|
||||
starOff : 'medal-off.png'
|
||||
});
|
||||
|
||||
$('#range').raty({
|
||||
iconRange : [
|
||||
{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },
|
||||
{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },
|
||||
{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },
|
||||
{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }
|
||||
],
|
||||
path : 'doc/img/'
|
||||
});
|
||||
|
||||
$('#big').raty({
|
||||
cancel : true,
|
||||
cancelOff : 'cancel-off-big.png',
|
||||
cancelOn : 'cancel-on-big.png',
|
||||
half : true,
|
||||
path : 'doc/img/',
|
||||
size : 24,
|
||||
starOff : 'star-off-big.png',
|
||||
starOn : 'star-on-big.png',
|
||||
starHalf : 'star-half-big.png'
|
||||
});
|
||||
|
||||
$('.group').raty();
|
||||
|
||||
$('#target').raty({
|
||||
cancel : true,
|
||||
cancelHint : 'none',
|
||||
target : '#hint'
|
||||
});
|
||||
|
||||
$('#format').raty({
|
||||
cancel : true,
|
||||
cancelHint : 'Sure?',
|
||||
target : '#hint-format',
|
||||
targetFormat : 'your score: {score}',
|
||||
targetKeep : true,
|
||||
targetText : 'none'
|
||||
});
|
||||
|
||||
$('#target-number').raty({
|
||||
cancel : true,
|
||||
target : '#score-target',
|
||||
targetKeep : true,
|
||||
targetType : 'number'
|
||||
});
|
||||
|
||||
$('#target-out').raty({
|
||||
target : '#hint-out',
|
||||
targetText : '--'
|
||||
});
|
||||
|
||||
$('#mouseover').raty({
|
||||
cancel : true,
|
||||
mouseover : function(score, evt) {
|
||||
var target = $('#mouseover-target');
|
||||
|
||||
if (score === null) {
|
||||
target.html('Boring!');
|
||||
} else if (score === undefined) {
|
||||
target.empty();
|
||||
} else {
|
||||
target.html('score: ' + score);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#precision').raty({
|
||||
half : true,
|
||||
path : 'doc/img/',
|
||||
precision : true,
|
||||
size : 24,
|
||||
starOff : 'star-off-big.png',
|
||||
starOn : 'star-on-big.png',
|
||||
starHalf : 'star-half-big.png',
|
||||
target : '#precision-target',
|
||||
targetType : 'number'
|
||||
});
|
||||
|
||||
$('#space').raty({
|
||||
space: false
|
||||
});
|
||||
|
||||
$('#single').raty({
|
||||
single: true
|
||||
});
|
||||
|
||||
var $result = $('#result').raty();
|
||||
|
||||
$('.action').raty({
|
||||
click: function(score, evt) {
|
||||
$(this).raty('cancel');
|
||||
$result.raty('score', score);
|
||||
}
|
||||
});
|
||||
|
||||
$('#function').raty({
|
||||
cancel : true,
|
||||
cancelHint : 'Boring!',
|
||||
click : function(score, evt) {
|
||||
$(this).fadeOut(function() { $(this).fadeIn(); });
|
||||
},
|
||||
targetKeep : true,
|
||||
score : 2,
|
||||
target : '#hint-function',
|
||||
targetText : '--'
|
||||
});
|
||||
|
||||
$('.score').click(function() {
|
||||
$('#function').raty('score', this.title);
|
||||
});
|
||||
|
||||
$('.click').click(function() {
|
||||
$('#function').raty('click', this.title);
|
||||
});
|
||||
|
||||
$('.readOnly').click(function() {
|
||||
$('#function').raty('readOnly', (this.title == 'true') ? true : false);
|
||||
});
|
||||
|
||||
$('.cancel').click(function() {
|
||||
$('#function').raty('cancel', (this.title == 'true') ? true : false);
|
||||
});
|
||||
|
||||
$('#reload').click(function() {
|
||||
$('#function').raty('reload');
|
||||
});
|
||||
|
||||
$('#get-score').click(function() {
|
||||
alert($('#function').raty('score'));
|
||||
});
|
||||
|
||||
$('#set-action').on('click', function() {
|
||||
var options = $('#set-id').val();
|
||||
|
||||
eval("$('#function').raty('set', " + options + ");");
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -323,6 +323,7 @@ define("LAN_SEFURL","SEF URL");
|
||||
define("LAN_COPY","Copy");
|
||||
define("LAN_KEYWORDS","Keywords");
|
||||
define("LAN_IMAGE","Image");
|
||||
define("LAN_TEMPLATE","Template");
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,254 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Lightbox 2</title>
|
||||
|
||||
<meta name="description" lang="en" content="Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
|
||||
<meta name="author" content="Lokesh Dhakar">
|
||||
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />
|
||||
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
|
||||
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="sidebar">
|
||||
<h1 class="logo"><a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox<em>2</em></a></h1>
|
||||
<p class="author"><a href="http://www.lokeshdhakar.com">by Lokesh Dhakar</a> <br />
|
||||
<span class="twitter"><a href="https://twitter.com/intent/user?screen_name=lokeshdhakar">Follow me on <em>Twitter</em></a></span></p>
|
||||
|
||||
<ul id="nav">
|
||||
<li><a href="#example" class="first">Example</a></li>
|
||||
<li><a href="#download">Download</a></li>
|
||||
<li><a href="#how">How to Use</a></li>
|
||||
<li><a href="#support">Support</a></li>
|
||||
<li><a href="#donate" class="last">Donate</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div class="section" id="overview">
|
||||
<p class="lead">Lightbox is a <em>simple, unobtrusive</em> script used to overlay images on top of the current page. It's a <em>snap to setup</em> and works on <em>all modern browsers</em>.</p>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="section" id="example">
|
||||
|
||||
|
||||
<h2>Examples</h2>
|
||||
|
||||
<h3>Single image</h3>
|
||||
<div class="imageRow">
|
||||
<div class="single">
|
||||
<a href="images/examples/image-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" alt="" /></a>
|
||||
</div>
|
||||
<div class="single">
|
||||
<a href="images/examples/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/examples/thumb-2.jpg" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 style="clear: both;">Image set</h3>
|
||||
|
||||
<div class="imageRow">
|
||||
<div class="set">
|
||||
<div class="single first">
|
||||
<a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" /></a>
|
||||
</div>
|
||||
<div class="single">
|
||||
<a href="images/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
|
||||
</div>
|
||||
<div class="single">
|
||||
<a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
|
||||
</div>
|
||||
<div class="single last">
|
||||
<a href="images/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="section" id="download">
|
||||
<h2>Download</h2>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<a href="releases/lightbox2.51.zip" class="download">
|
||||
<img src="images/box.png" alt="Box" class="box" />
|
||||
<div class="file">
|
||||
Lightbox <div class="version">v2.51</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<ul class="filelist">
|
||||
<li class="header">Includes:</li>
|
||||
<li>index.html</li>
|
||||
<li><span class="folder">js/</span>jquery-1.7.2.min.js</li>
|
||||
<li><span class="folder">js/</span>lightbox.js</li>
|
||||
<li><span class="folder">css/</span>lightbox.css</li>
|
||||
<li><span class="folder">images/</span>close.png</li>
|
||||
<li><span class="folder">images/</span>loading.gif</li>
|
||||
<li><span class="folder">images/</span>next.png</li>
|
||||
<li><span class="folder">images/</span>prev.png</li>
|
||||
<li><span class="note">Plus a few files for the demo page</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>Lightbox2 is open-source.<br /> Fork the code on <a href="https://github.com/lokesh/lightbox2">Github</a>.</p>
|
||||
|
||||
|
||||
|
||||
<h3>Changelog</h3>
|
||||
<ul class="changelog">
|
||||
<li><span class="version">v2.51 </span> - <span class="date">4/20/12</span> - IE Fix: removed stray console.log statements. :-/</li>
|
||||
<li><span class="version">v2.5 </span> - <span class="date">4/10/12</span> - Switch to jQuery. Code put in Github. Compiling with Coffeescript and SASS.</li>
|
||||
<li class="old"><span class="version">v2.05 </span> - <span class="date">3/18/11</span> - Upgraded Prototype (now works in IE9) and Scriptaculous. Minor bug fixes.</li>
|
||||
<li class="old"><span class="version">v2.04 </span> - <span class="date">3/9/08</span>
|
||||
<ul>
|
||||
<li>NEW - Upgraded Prototype from v1.4 to v1.6.0.2
|
||||
<li>NEW - Moved label text into configuration for easier localization</li>
|
||||
<li>UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.</li>
|
||||
<li>FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.</li>
|
||||
<li>FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="old"><span class="version">v2.03.3 </span> - <span class="date">5/21/07 </span>- Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.</li>
|
||||
<li class="old"><span class="version">v2.03.2 </span> - <span class="date">4/30/07</span> - Fixed animated gif support in IE/Opera.</li>
|
||||
<li class="old"><span class="version">v2.03.1 </span> - <span class="date">4/18/07</span> - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.</li>
|
||||
<li class="old"><span class="version">v2.03</span> - <span class="date">4/10/07 </span>- Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.</li>
|
||||
<li class="old"><span class="version">v2.02</span> - Fixed layout issues caused by multiline captions. Added keyboard navigation.</li>
|
||||
<li class="old"><span class="version">v2.01</span> - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.</li>
|
||||
</ul>
|
||||
<a href="#" class="showOlderChanges">Show older changes</a>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
<div class="section" id="how">
|
||||
<h2>How to use</h2>
|
||||
<h3>Part 1 - Setup</h3>
|
||||
<ol>
|
||||
<li>Lightbox 2 uses the <a href="http://jquery.com/">jQuery</a> framework. Load jQuery and the Lightbox javascript files in the proper order.
|
||||
<pre><code><script src="js/jquery-1.7.2.min.js"></script>
|
||||
<script src="js/lightbox.js"></script>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>Include the Lightbox CSS file.
|
||||
<pre><code><link href="css/lightbox.css" rel="stylesheet" />
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>Check the CSS and make sure the referenced <code>prev.png</code> and <code>next.png</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>close.png</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li>
|
||||
</ol>
|
||||
<h3>Part 2 - Activate</h3>
|
||||
<ol>
|
||||
<li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate Lightbox.
|
||||
<pre><code><a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
|
||||
</code></pre>
|
||||
<em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption. </li>
|
||||
<li>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute.
|
||||
<pre><code><a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
|
||||
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
|
||||
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
|
||||
</code></pre>
|
||||
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="section" id="support">
|
||||
<h2>Support</h2>
|
||||
<p>For personal support issues and feature requests please post a message in the forums. I do not have time to personally respond to support emails, please use the forum. Thanks!
|
||||
</p>
|
||||
<p>For bug reports, send a note with the browser you are using and the version of Lightbox to lokesh.dhakar@[ google's email service ].com.</p>
|
||||
|
||||
<a href="http://lokeshdhakar.com/forums/" class="forums">
|
||||
<img src="images/speech-bubbles.png" alt="Speech bubbles" class="speech" />
|
||||
<div class="link">
|
||||
Lightbox<br />
|
||||
<span class="sub">Forums</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
<div class="section" id="donate">
|
||||
<h2>Donate</h2>
|
||||
<p>Lightbox is completely free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. All donations are sincerely appreciated. Thanks!</p>
|
||||
|
||||
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
|
||||
<fieldset>
|
||||
<input type="hidden" name="cmd" value="_xclick" />
|
||||
<input type="hidden" name="business" value="lokesh.dhakar@gmail.com" />
|
||||
<input type="hidden" name="item_name" value="Donation for Lightbox">
|
||||
<input type="hidden" name="no_note" value="1" />
|
||||
<input type="hidden" name="currency_code" value="USD" />
|
||||
<input type="hidden" name="tax" value="0" />
|
||||
<input type="hidden" name="bn" value="PP-DonationsBF" />
|
||||
<input type="image" src="images/donate.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="section" id="elsewhere">
|
||||
<h3>Find me elsewhere</h3>
|
||||
|
||||
<div class="row">
|
||||
<a href="https://twitter.com/intent/user?screen_name=lokeshdhakar" class="button">Twitter</a>
|
||||
<a href="http://lokeshdhakar.com/" class="button">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end #content -->
|
||||
|
||||
<script src="js/jquery-1.7.2.min.js"></script>
|
||||
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
|
||||
<script src="js/jquery.smooth-scroll.min.js"></script>
|
||||
<script src="js/lightbox.js"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
$('a').smoothScroll({
|
||||
speed: 1000,
|
||||
easing: 'easeInOutCubic'
|
||||
});
|
||||
|
||||
$('.showOlderChanges').on('click', function(e){
|
||||
$('.changelog .old').slideDown('slow');
|
||||
$(this).fadeOut();
|
||||
e.preventDefault();
|
||||
})
|
||||
});
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-2196019-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -353,6 +353,7 @@ if(varset($pref['compress_output'],false) && $server_support == true && $browser
|
||||
$page = gzencode($page, $level);
|
||||
header("Content-Encoding: gzip", true);
|
||||
header("Content-Length: ".strlen($page), true);
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -368,6 +369,8 @@ else
|
||||
header("Content-Length: ".strlen($page), true);
|
||||
}
|
||||
|
||||
header("X-Powered-By: e107", true); // no less secure than e107-specific html.
|
||||
|
||||
// should come after the Etag header
|
||||
if ($canCache && isset($_SERVER['HTTP_IF_NONE_MATCH']))
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user