mirror of
https://github.com/Pathduck/gallery3.git
synced 2026-08-30 10:55:50 -04:00
Added basic table styles. Fixed width issue on gContent in the admin theme. Only display background colors on gInfo, gError, gWarning, etc. if they appear in gSiteStatus or gMessage. Miscellaneous form style updates.
This commit is contained in:
Chad Kieffer
@@ -37,6 +37,7 @@
|
||||
|
||||
#gContent {
|
||||
font-size: 1.1em;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
/** *******************************************************************
|
||||
@@ -59,10 +60,6 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#gContent .gBlock {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#gContent .gBlock h2 {
|
||||
cursor: move;
|
||||
margin: -.8em -.3em 0 -.3em;
|
||||
@@ -74,14 +71,7 @@
|
||||
}
|
||||
|
||||
#gPhotoStream .gBlockContent {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.gBlockContent .gError,
|
||||
.gBlockContent .gInfo,
|
||||
.gBlockContent .gSuccess,
|
||||
.gBlockContent .gWarning {
|
||||
background-color: transparent;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/** *******************************************************************
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
* 7) Browser hacks
|
||||
* 8) jQuery and jQuery UI
|
||||
*
|
||||
* @todo Default user icon (user w/ camera)
|
||||
* @todo Group Credits and gLoginMenu seperator styles
|
||||
* @todo Apply :hover bg image to #gViewMenu (will clear fix correct this?)
|
||||
* @todo Refactor form layout styles to reserve room for validation messages in default state. This
|
||||
@@ -77,13 +78,31 @@ a:hover {
|
||||
|
||||
/* Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
|
||||
caption {
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#gContent table {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
caption,
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ccc;
|
||||
padding: .3em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
@@ -92,18 +111,27 @@ fieldset {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#gHeader fieldset,
|
||||
#gSidebar fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#gHeader legend,
|
||||
#gSidebar legend {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select {
|
||||
width: 50%;
|
||||
}
|
||||
@@ -123,6 +151,10 @@ input[type="checkbox"] {
|
||||
input[type="file"] {
|
||||
}
|
||||
|
||||
input[type="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
}
|
||||
|
||||
@@ -135,7 +167,9 @@ input[type="reset"] {
|
||||
input[type="submit"] {
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
#gHeader input[type="text"],
|
||||
#gSidebar input[type="text"] {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
option {
|
||||
@@ -148,7 +182,7 @@ select {
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 99%;
|
||||
width: 100%;
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
@@ -159,6 +193,7 @@ input:focus,
|
||||
textarea:focus,
|
||||
option:focus {
|
||||
background-color: #ffc;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
@@ -181,13 +216,11 @@ select,
|
||||
textarea {
|
||||
display: block;
|
||||
clear: both;
|
||||
padding: .2em;
|
||||
}
|
||||
|
||||
/* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
|
||||
.gRequired {
|
||||
}
|
||||
|
||||
.gValidationRule {
|
||||
font-size: 80%;
|
||||
margin-top: .5em;
|
||||
@@ -235,19 +268,6 @@ li.gError select {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
/* Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
|
||||
.gMetadata td,
|
||||
.gMetadata th {
|
||||
padding: 0 1em .5em 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.gMetadata th,
|
||||
.gMetadata td.toggle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
|
||||
#gSiteStatus li,
|
||||
@@ -256,29 +276,48 @@ li.gError select {
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
|
||||
.gError, .gInfo, .gSuccess, .gWarning {
|
||||
background-color: #e8e8e8;
|
||||
.gError,
|
||||
.gInfo,
|
||||
.gSuccess,
|
||||
.gWarning {
|
||||
background-position: .4em 50%;
|
||||
background-repeat: no-repeat;
|
||||
padding: .4em .5em .4em 30px;
|
||||
}
|
||||
|
||||
.gError {
|
||||
#gSiteStatus .gError,
|
||||
#gMessage .gError {
|
||||
background-color: #fcc;
|
||||
}
|
||||
|
||||
.gError {
|
||||
background-image: url('../images/ico-error.png');
|
||||
}
|
||||
|
||||
#gSiteStatus .gInfo,
|
||||
#gMessage .gInfo {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.gInfo {
|
||||
background-image: url('../images/ico-info.png');
|
||||
}
|
||||
|
||||
.gSuccess {
|
||||
#gSiteStatus .gSuccess,
|
||||
#gMessage .gSuccess {
|
||||
background-color: #cfc;
|
||||
}
|
||||
|
||||
.gSuccess {
|
||||
background-image: url('../images/ico-success.png');
|
||||
}
|
||||
|
||||
.gWarning {
|
||||
#gSiteStatus .gWarning,
|
||||
#gMessage .gWarning {
|
||||
background-color: #ff9;
|
||||
}
|
||||
|
||||
.gWarning {
|
||||
background-image: url('../images/ico-warning.png');
|
||||
}
|
||||
|
||||
@@ -290,18 +329,11 @@ li.gError select {
|
||||
padding: .4em .5em;
|
||||
}
|
||||
|
||||
#gHeader #gSearchForm legend,
|
||||
#gHeader #gSearchForm label,
|
||||
#gSidebar #gAddTagForm legend,
|
||||
#gSidebar #gAddTagForm label {
|
||||
#gHeader #gSearchForm label,
|
||||
#gSidebar #gAddTagForm label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#gHeader #gSearchForm fieldset,
|
||||
#gSidebar #gAddTagForm fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#gHeader #gSearchForm input[type="text"],
|
||||
#gSidebar #gAddTagForm input[type="text"] {
|
||||
width: 10em;
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
/**
|
||||
* jQuery lightBox plugin
|
||||
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
|
||||
* and adapted to me for use like a plugin from jQuery.
|
||||
* @name jquery-lightbox-0.5.css
|
||||
* @author Leandro Vieira Pinho - http://leandrovieira.com
|
||||
* @version 0.5
|
||||
* @date April 11, 2008
|
||||
* @category jQuery plugin
|
||||
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
|
||||
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
|
||||
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
|
||||
*/
|
||||
#jquery-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 90;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
#jquery-lightbox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
#jquery-lightbox a img { border: none; }
|
||||
#lightbox-container-image-box {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#lightbox-container-image { padding: 10px; }
|
||||
#lightbox-loading {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 0%;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
#lightbox-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
#lightbox-container-image-box > #lightbox-nav { left: 0; }
|
||||
#lightbox-nav a { outline: none;}
|
||||
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
zoom: 1;
|
||||
display: block;
|
||||
}
|
||||
#lightbox-nav-btnPrev {
|
||||
left: 0;
|
||||
float: left;
|
||||
}
|
||||
#lightbox-nav-btnNext {
|
||||
right: 0;
|
||||
float: right;
|
||||
}
|
||||
#lightbox-container-image-data-box {
|
||||
font: 10px Verdana, Helvetica, sans-serif;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
line-height: 1.4em;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding: 0 10px 0;
|
||||
}
|
||||
#lightbox-container-image-data {
|
||||
padding: 0 10px;
|
||||
color: #666;
|
||||
}
|
||||
#lightbox-container-image-data #lightbox-image-details {
|
||||
width: 70%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
#lightbox-image-details-caption { font-weight: bold; }
|
||||
#lightbox-image-details-currentNumber {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1.0em;
|
||||
}
|
||||
#lightbox-secNav-btnClose {
|
||||
width: 66px;
|
||||
float: right;
|
||||
padding-bottom: 0.7em;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
Binary file not shown.
|
After Width: | Height: | Size: 812 B |
Binary file not shown.
|
After Width: | Height: | Size: 832 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,472 @@
|
||||
/**
|
||||
* jQuery lightBox plugin
|
||||
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
|
||||
* and adapted to me for use like a plugin from jQuery.
|
||||
* @name jquery-lightbox-0.5.js
|
||||
* @author Leandro Vieira Pinho - http://leandrovieira.com
|
||||
* @version 0.5
|
||||
* @date April 11, 2008
|
||||
* @category jQuery plugin
|
||||
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
|
||||
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
|
||||
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
|
||||
*/
|
||||
|
||||
// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
|
||||
(function($) {
|
||||
/**
|
||||
* $ is an alias to jQuery object
|
||||
*
|
||||
*/
|
||||
$.fn.lightBox = function(settings) {
|
||||
// Settings to configure the jQuery lightBox plugin how you like
|
||||
settings = jQuery.extend({
|
||||
// Configuration related to overlay
|
||||
overlayBgColor: '#000', // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
|
||||
overlayOpacity: 0.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
|
||||
// Configuration related to navigation
|
||||
fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
|
||||
// Configuration related to images
|
||||
imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
|
||||
imageBtnPrev: 'images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
|
||||
imageBtnNext: 'images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
|
||||
imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
|
||||
imageBlank: 'images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
|
||||
// Configuration related to container image box
|
||||
containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value
|
||||
containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default.
|
||||
// Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
|
||||
txtImage: 'Image', // (string) Specify text "Image"
|
||||
txtOf: 'of', // (string) Specify text "of"
|
||||
// Configuration related to keyboard navigation
|
||||
keyToClose: 'c', // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to.
|
||||
keyToPrev: 'p', // (string) (p = previous) Letter to show the previous image
|
||||
keyToNext: 'n', // (string) (n = next) Letter to show the next image.
|
||||
// Don´t alter these variables in any way
|
||||
imageArray: [],
|
||||
activeImage: 0
|
||||
},settings);
|
||||
// Caching the jQuery object with all elements matched
|
||||
var jQueryMatchedObj = this; // This, in this context, refer to jQuery object
|
||||
/**
|
||||
* Initializing the plugin calling the start function
|
||||
*
|
||||
* @return boolean false
|
||||
*/
|
||||
function _initialize() {
|
||||
_start(this,jQueryMatchedObj); // This, in this context, refer to object (link) which the user have clicked
|
||||
return false; // Avoid the browser following the link
|
||||
}
|
||||
/**
|
||||
* Start the jQuery lightBox plugin
|
||||
*
|
||||
* @param object objClicked The object (link) whick the user have clicked
|
||||
* @param object jQueryMatchedObj The jQuery object with all elements matched
|
||||
*/
|
||||
function _start(objClicked,jQueryMatchedObj) {
|
||||
// Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
|
||||
$('embed, object, select').css({ 'visibility' : 'hidden' });
|
||||
// Call the function to create the markup structure; style some elements; assign events in some elements.
|
||||
_set_interface();
|
||||
// Unset total images in imageArray
|
||||
settings.imageArray.length = 0;
|
||||
// Unset image active information
|
||||
settings.activeImage = 0;
|
||||
// We have an image set? Or just an image? Let´s see it.
|
||||
if ( jQueryMatchedObj.length == 1 ) {
|
||||
settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
|
||||
} else {
|
||||
// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
|
||||
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
|
||||
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
|
||||
}
|
||||
}
|
||||
while ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) {
|
||||
settings.activeImage++;
|
||||
}
|
||||
// Call the function that prepares image exibition
|
||||
_set_image_to_view();
|
||||
}
|
||||
/**
|
||||
* Create the jQuery lightBox plugin interface
|
||||
*
|
||||
* The HTML markup will be like that:
|
||||
<div id="jquery-overlay"></div>
|
||||
<div id="jquery-lightbox">
|
||||
<div id="lightbox-container-image-box">
|
||||
<div id="lightbox-container-image">
|
||||
<img src="../fotos/XX.jpg" id="lightbox-image">
|
||||
<div id="lightbox-nav">
|
||||
<a href="#" id="lightbox-nav-btnPrev"></a>
|
||||
<a href="#" id="lightbox-nav-btnNext"></a>
|
||||
</div>
|
||||
<div id="lightbox-loading">
|
||||
<a href="#" id="lightbox-loading-link">
|
||||
<img src="../images/lightbox-ico-loading.gif">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox-container-image-data-box">
|
||||
<div id="lightbox-container-image-data">
|
||||
<div id="lightbox-image-details">
|
||||
<span id="lightbox-image-details-caption"></span>
|
||||
<span id="lightbox-image-details-currentNumber"></span>
|
||||
</div>
|
||||
<div id="lightbox-secNav">
|
||||
<a href="#" id="lightbox-secNav-btnClose">
|
||||
<img src="../images/lightbox-btn-close.gif">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*
|
||||
*/
|
||||
function _set_interface() {
|
||||
// Apply the HTML markup into body tag
|
||||
$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
|
||||
// Get page sizes
|
||||
var arrPageSizes = ___getPageSize();
|
||||
// Style overlay and show it
|
||||
$('#jquery-overlay').css({
|
||||
backgroundColor: settings.overlayBgColor,
|
||||
opacity: settings.overlayOpacity,
|
||||
width: arrPageSizes[0],
|
||||
height: arrPageSizes[1]
|
||||
}).fadeIn();
|
||||
// Get page scroll
|
||||
var arrPageScroll = ___getPageScroll();
|
||||
// Calculate top and left offset for the jquery-lightbox div object and show it
|
||||
$('#jquery-lightbox').css({
|
||||
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
|
||||
left: arrPageScroll[0]
|
||||
}).show();
|
||||
// Assigning click events in elements to close overlay
|
||||
$('#jquery-overlay,#jquery-lightbox').click(function() {
|
||||
_finish();
|
||||
});
|
||||
// Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
|
||||
$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
|
||||
_finish();
|
||||
return false;
|
||||
});
|
||||
// If window was resized, calculate the new overlay dimensions
|
||||
$(window).resize(function() {
|
||||
// Get page sizes
|
||||
var arrPageSizes = ___getPageSize();
|
||||
// Style overlay and show it
|
||||
$('#jquery-overlay').css({
|
||||
width: arrPageSizes[0],
|
||||
height: arrPageSizes[1]
|
||||
});
|
||||
// Get page scroll
|
||||
var arrPageScroll = ___getPageScroll();
|
||||
// Calculate top and left offset for the jquery-lightbox div object and show it
|
||||
$('#jquery-lightbox').css({
|
||||
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
|
||||
left: arrPageScroll[0]
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Prepares image exibition; doing a image´s preloader to calculate it´s size
|
||||
*
|
||||
*/
|
||||
function _set_image_to_view() { // show the loading
|
||||
// Show the loading
|
||||
$('#lightbox-loading').show();
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
|
||||
} else {
|
||||
// Hide some elements
|
||||
$('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
|
||||
}
|
||||
// Image preload process
|
||||
var objImagePreloader = new Image();
|
||||
objImagePreloader.onload = function() {
|
||||
$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
|
||||
// Perfomance an effect in the image container resizing it
|
||||
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
|
||||
// clear onLoad, IE behaves irratically with animated gifs otherwise
|
||||
objImagePreloader.onload=function(){};
|
||||
};
|
||||
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
|
||||
};
|
||||
/**
|
||||
* Perfomance an effect in the image container resizing it
|
||||
*
|
||||
* @param integer intImageWidth The image´s width that will be showed
|
||||
* @param integer intImageHeight The image´s height that will be showed
|
||||
*/
|
||||
function _resize_container_image_box(intImageWidth,intImageHeight) {
|
||||
// Get current width and height
|
||||
var intCurrentWidth = $('#lightbox-container-image-box').width();
|
||||
var intCurrentHeight = $('#lightbox-container-image-box').height();
|
||||
// Get the width and height of the selected image plus the padding
|
||||
var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image´s width and the left and right padding value
|
||||
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image´s height and the left and right padding value
|
||||
// Diferences
|
||||
var intDiffW = intCurrentWidth - intWidth;
|
||||
var intDiffH = intCurrentHeight - intHeight;
|
||||
// Perfomance the effect
|
||||
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
|
||||
if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
|
||||
if ( $.browser.msie ) {
|
||||
___pause(250);
|
||||
} else {
|
||||
___pause(100);
|
||||
}
|
||||
}
|
||||
$('#lightbox-container-image-data-box').css({ width: intImageWidth });
|
||||
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
|
||||
};
|
||||
/**
|
||||
* Show the prepared image
|
||||
*
|
||||
*/
|
||||
function _show_image() {
|
||||
$('#lightbox-loading').hide();
|
||||
$('#lightbox-image').fadeIn(function() {
|
||||
_show_image_data();
|
||||
_set_navigation();
|
||||
});
|
||||
_preload_neighbor_images();
|
||||
};
|
||||
/**
|
||||
* Show the image information
|
||||
*
|
||||
*/
|
||||
function _show_image_data() {
|
||||
$('#lightbox-container-image-data-box').slideDown('fast');
|
||||
$('#lightbox-image-details-caption').hide();
|
||||
if ( settings.imageArray[settings.activeImage][1] ) {
|
||||
$('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
|
||||
}
|
||||
// If we have a image set, display 'Image X of X'
|
||||
if ( settings.imageArray.length > 1 ) {
|
||||
$('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Display the button navigations
|
||||
*
|
||||
*/
|
||||
function _set_navigation() {
|
||||
$('#lightbox-nav').show();
|
||||
|
||||
// Instead to define this configuration in CSS file, we define here. And it´s need to IE. Just.
|
||||
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
|
||||
// Show the prev button, if not the first image in set
|
||||
if ( settings.activeImage != 0 ) {
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
|
||||
.unbind()
|
||||
.bind('click',function() {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
// Show the images button for Next buttons
|
||||
$('#lightbox-nav-btnPrev').unbind().hover(function() {
|
||||
$(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
|
||||
},function() {
|
||||
$(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
}).show().bind('click',function() {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show the next button, if not the last image in set
|
||||
if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
|
||||
.unbind()
|
||||
.bind('click',function() {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
// Show the images button for Next buttons
|
||||
$('#lightbox-nav-btnNext').unbind().hover(function() {
|
||||
$(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
|
||||
},function() {
|
||||
$(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
}).show().bind('click',function() {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
// Enable keyboard navigation
|
||||
_enable_keyboard_navigation();
|
||||
}
|
||||
/**
|
||||
* Enable a support to keyboard navigation
|
||||
*
|
||||
*/
|
||||
function _enable_keyboard_navigation() {
|
||||
$(document).keydown(function(objEvent) {
|
||||
_keyboard_action(objEvent);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Disable the support to keyboard navigation
|
||||
*
|
||||
*/
|
||||
function _disable_keyboard_navigation() {
|
||||
$(document).unbind();
|
||||
}
|
||||
/**
|
||||
* Perform the keyboard actions
|
||||
*
|
||||
*/
|
||||
function _keyboard_action(objEvent) {
|
||||
// To ie
|
||||
if ( objEvent == null ) {
|
||||
keycode = event.keyCode;
|
||||
escapeKey = 27;
|
||||
// To Mozilla
|
||||
} else {
|
||||
keycode = objEvent.keyCode;
|
||||
escapeKey = objEvent.DOM_VK_ESCAPE;
|
||||
}
|
||||
// Get the key in lower case form
|
||||
key = String.fromCharCode(keycode).toLowerCase();
|
||||
// Verify the keys to close the ligthBox
|
||||
if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) {
|
||||
_finish();
|
||||
}
|
||||
// Verify the key to show the previous image
|
||||
if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) {
|
||||
// If we´re not showing the first image, call the previous
|
||||
if ( settings.activeImage != 0 ) {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
_disable_keyboard_navigation();
|
||||
}
|
||||
}
|
||||
// Verify the key to show the next image
|
||||
if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) {
|
||||
// If we´re not showing the last image, call the next
|
||||
if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
_disable_keyboard_navigation();
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Preload prev and next images being showed
|
||||
*
|
||||
*/
|
||||
function _preload_neighbor_images() {
|
||||
if ( (settings.imageArray.length -1) > settings.activeImage ) {
|
||||
objNext = new Image();
|
||||
objNext.src = settings.imageArray[settings.activeImage + 1][0];
|
||||
}
|
||||
if ( settings.activeImage > 0 ) {
|
||||
objPrev = new Image();
|
||||
objPrev.src = settings.imageArray[settings.activeImage -1][0];
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Remove jQuery lightBox plugin HTML markup
|
||||
*
|
||||
*/
|
||||
function _finish() {
|
||||
$('#jquery-lightbox').remove();
|
||||
$('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });
|
||||
// Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
|
||||
$('embed, object, select').css({ 'visibility' : 'visible' });
|
||||
}
|
||||
/**
|
||||
/ THIRD FUNCTION
|
||||
* getPageSize() by quirksmode.com
|
||||
*
|
||||
* @return Array Return an array with page width, height and window width, height
|
||||
*/
|
||||
function ___getPageSize() {
|
||||
var xScroll, yScroll;
|
||||
if (window.innerHeight && window.scrollMaxY) {
|
||||
xScroll = window.innerWidth + window.scrollMaxX;
|
||||
yScroll = window.innerHeight + window.scrollMaxY;
|
||||
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
||||
xScroll = document.body.scrollWidth;
|
||||
yScroll = document.body.scrollHeight;
|
||||
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
||||
xScroll = document.body.offsetWidth;
|
||||
yScroll = document.body.offsetHeight;
|
||||
}
|
||||
var windowWidth, windowHeight;
|
||||
if (self.innerHeight) { // all except Explorer
|
||||
if(document.documentElement.clientWidth){
|
||||
windowWidth = document.documentElement.clientWidth;
|
||||
} else {
|
||||
windowWidth = self.innerWidth;
|
||||
}
|
||||
windowHeight = self.innerHeight;
|
||||
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
||||
windowWidth = document.documentElement.clientWidth;
|
||||
windowHeight = document.documentElement.clientHeight;
|
||||
} else if (document.body) { // other Explorers
|
||||
windowWidth = document.body.clientWidth;
|
||||
windowHeight = document.body.clientHeight;
|
||||
}
|
||||
// for small pages with total height less then height of the viewport
|
||||
if(yScroll < windowHeight){
|
||||
pageHeight = windowHeight;
|
||||
} else {
|
||||
pageHeight = yScroll;
|
||||
}
|
||||
// for small pages with total width less then width of the viewport
|
||||
if(xScroll < windowWidth){
|
||||
pageWidth = xScroll;
|
||||
} else {
|
||||
pageWidth = windowWidth;
|
||||
}
|
||||
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
|
||||
return arrayPageSize;
|
||||
};
|
||||
/**
|
||||
/ THIRD FUNCTION
|
||||
* getPageScroll() by quirksmode.com
|
||||
*
|
||||
* @return Array Return an array with x,y page scroll values.
|
||||
*/
|
||||
function ___getPageScroll() {
|
||||
var xScroll, yScroll;
|
||||
if (self.pageYOffset) {
|
||||
yScroll = self.pageYOffset;
|
||||
xScroll = self.pageXOffset;
|
||||
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
|
||||
yScroll = document.documentElement.scrollTop;
|
||||
xScroll = document.documentElement.scrollLeft;
|
||||
} else if (document.body) {// all other Explorers
|
||||
yScroll = document.body.scrollTop;
|
||||
xScroll = document.body.scrollLeft;
|
||||
}
|
||||
arrayPageScroll = new Array(xScroll,yScroll);
|
||||
return arrayPageScroll;
|
||||
};
|
||||
/**
|
||||
* Stop the code execution from a escified time in milisecond
|
||||
*
|
||||
*/
|
||||
function ___pause(ms) {
|
||||
var date = new Date();
|
||||
curDate = null;
|
||||
do { var curDate = new Date(); }
|
||||
while ( curDate - date < ms);
|
||||
};
|
||||
// Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once
|
||||
return this.unbind('click').click(_initialize);
|
||||
};
|
||||
})(jQuery); // Call and execute the function immediately passing the jQuery object
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* jQuery lightBox plugin
|
||||
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
|
||||
* and adapted to me for use like a plugin from jQuery.
|
||||
* @name jquery-lightbox-0.5.js
|
||||
* @author Leandro Vieira Pinho - http://leandrovieira.com
|
||||
* @version 0.5
|
||||
* @date April 11, 2008
|
||||
* @category jQuery plugin
|
||||
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
|
||||
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
|
||||
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
|
||||
*/
|
||||
(function($){$.fn.lightBox=function(settings){settings=jQuery.extend({overlayBgColor:'#000',overlayOpacity:0.8,fixedNavigation:false,imageLoading:'images/lightbox-ico-loading.gif',imageBtnPrev:'images/lightbox-btn-prev.gif',imageBtnNext:'images/lightbox-btn-next.gif',imageBtnClose:'images/lightbox-btn-close.gif',imageBlank:'images/lightbox-blank.gif',containerBorderSize:10,containerResizeSpeed:400,txtImage:'Image',txtOf:'of',keyToClose:'c',keyToPrev:'p',keyToNext:'n',imageArray:[],activeImage:0},settings);var jQueryMatchedObj=this;function _initialize(){_start(this,jQueryMatchedObj);return false;}
|
||||
function _start(objClicked,jQueryMatchedObj){$('embed, object, select').css({'visibility':'hidden'});_set_interface();settings.imageArray.length=0;settings.activeImage=0;if(jQueryMatchedObj.length==1){settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));}else{for(var i=0;i<jQueryMatchedObj.length;i++){settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));}}
|
||||
while(settings.imageArray[settings.activeImage][0]!=objClicked.getAttribute('href')){settings.activeImage++;}
|
||||
_set_image_to_view();}
|
||||
function _set_interface(){$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+settings.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+settings.imageBtnClose+'"></a></div></div></div></div>');var arrPageSizes=___getPageSize();$('#jquery-overlay').css({backgroundColor:settings.overlayBgColor,opacity:settings.overlayOpacity,width:arrPageSizes[0],height:arrPageSizes[1]}).fadeIn();var arrPageScroll=___getPageScroll();$('#jquery-lightbox').css({top:arrPageScroll[1]+(arrPageSizes[3]/10),left:arrPageScroll[0]}).show();$('#jquery-overlay,#jquery-lightbox').click(function(){_finish();});$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function(){_finish();return false;});$(window).resize(function(){var arrPageSizes=___getPageSize();$('#jquery-overlay').css({width:arrPageSizes[0],height:arrPageSizes[1]});var arrPageScroll=___getPageScroll();$('#jquery-lightbox').css({top:arrPageScroll[1]+(arrPageSizes[3]/10),left:arrPageScroll[0]});});}
|
||||
function _set_image_to_view(){$('#lightbox-loading').show();if(settings.fixedNavigation){$('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();}else{$('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();}
|
||||
var objImagePreloader=new Image();objImagePreloader.onload=function(){$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);objImagePreloader.onload=function(){};};objImagePreloader.src=settings.imageArray[settings.activeImage][0];};function _resize_container_image_box(intImageWidth,intImageHeight){var intCurrentWidth=$('#lightbox-container-image-box').width();var intCurrentHeight=$('#lightbox-container-image-box').height();var intWidth=(intImageWidth+(settings.containerBorderSize*2));var intHeight=(intImageHeight+(settings.containerBorderSize*2));var intDiffW=intCurrentWidth-intWidth;var intDiffH=intCurrentHeight-intHeight;$('#lightbox-container-image-box').animate({width:intWidth,height:intHeight},settings.containerResizeSpeed,function(){_show_image();});if((intDiffW==0)&&(intDiffH==0)){if($.browser.msie){___pause(250);}else{___pause(100);}}
|
||||
$('#lightbox-container-image-data-box').css({width:intImageWidth});$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({height:intImageHeight+(settings.containerBorderSize*2)});};function _show_image(){$('#lightbox-loading').hide();$('#lightbox-image').fadeIn(function(){_show_image_data();_set_navigation();});_preload_neighbor_images();};function _show_image_data(){$('#lightbox-container-image-data-box').slideDown('fast');$('#lightbox-image-details-caption').hide();if(settings.imageArray[settings.activeImage][1]){$('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();}
|
||||
if(settings.imageArray.length>1){$('#lightbox-image-details-currentNumber').html(settings.txtImage+' '+(settings.activeImage+1)+' '+settings.txtOf+' '+settings.imageArray.length).show();}}
|
||||
function _set_navigation(){$('#lightbox-nav').show();$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({'background':'transparent url('+settings.imageBlank+') no-repeat'});if(settings.activeImage!=0){if(settings.fixedNavigation){$('#lightbox-nav-btnPrev').css({'background':'url('+settings.imageBtnPrev+') left 15% no-repeat'}).unbind().bind('click',function(){settings.activeImage=settings.activeImage-1;_set_image_to_view();return false;});}else{$('#lightbox-nav-btnPrev').unbind().hover(function(){$(this).css({'background':'url('+settings.imageBtnPrev+') left 15% no-repeat'});},function(){$(this).css({'background':'transparent url('+settings.imageBlank+') no-repeat'});}).show().bind('click',function(){settings.activeImage=settings.activeImage-1;_set_image_to_view();return false;});}}
|
||||
if(settings.activeImage!=(settings.imageArray.length-1)){if(settings.fixedNavigation){$('#lightbox-nav-btnNext').css({'background':'url('+settings.imageBtnNext+') right 15% no-repeat'}).unbind().bind('click',function(){settings.activeImage=settings.activeImage+1;_set_image_to_view();return false;});}else{$('#lightbox-nav-btnNext').unbind().hover(function(){$(this).css({'background':'url('+settings.imageBtnNext+') right 15% no-repeat'});},function(){$(this).css({'background':'transparent url('+settings.imageBlank+') no-repeat'});}).show().bind('click',function(){settings.activeImage=settings.activeImage+1;_set_image_to_view();return false;});}}
|
||||
_enable_keyboard_navigation();}
|
||||
function _enable_keyboard_navigation(){$(document).keydown(function(objEvent){_keyboard_action(objEvent);});}
|
||||
function _disable_keyboard_navigation(){$(document).unbind();}
|
||||
function _keyboard_action(objEvent){if(objEvent==null){keycode=event.keyCode;escapeKey=27;}else{keycode=objEvent.keyCode;escapeKey=objEvent.DOM_VK_ESCAPE;}
|
||||
key=String.fromCharCode(keycode).toLowerCase();if((key==settings.keyToClose)||(key=='x')||(keycode==escapeKey)){_finish();}
|
||||
if((key==settings.keyToPrev)||(keycode==37)){if(settings.activeImage!=0){settings.activeImage=settings.activeImage-1;_set_image_to_view();_disable_keyboard_navigation();}}
|
||||
if((key==settings.keyToNext)||(keycode==39)){if(settings.activeImage!=(settings.imageArray.length-1)){settings.activeImage=settings.activeImage+1;_set_image_to_view();_disable_keyboard_navigation();}}}
|
||||
function _preload_neighbor_images(){if((settings.imageArray.length-1)>settings.activeImage){objNext=new Image();objNext.src=settings.imageArray[settings.activeImage+1][0];}
|
||||
if(settings.activeImage>0){objPrev=new Image();objPrev.src=settings.imageArray[settings.activeImage-1][0];}}
|
||||
function _finish(){$('#jquery-lightbox').remove();$('#jquery-overlay').fadeOut(function(){$('#jquery-overlay').remove();});$('embed, object, select').css({'visibility':'visible'});}
|
||||
function ___getPageSize(){var xScroll,yScroll;if(window.innerHeight&&window.scrollMaxY){xScroll=window.innerWidth+window.scrollMaxX;yScroll=window.innerHeight+window.scrollMaxY;}else if(document.body.scrollHeight>document.body.offsetHeight){xScroll=document.body.scrollWidth;yScroll=document.body.scrollHeight;}else{xScroll=document.body.offsetWidth;yScroll=document.body.offsetHeight;}
|
||||
var windowWidth,windowHeight;if(self.innerHeight){if(document.documentElement.clientWidth){windowWidth=document.documentElement.clientWidth;}else{windowWidth=self.innerWidth;}
|
||||
windowHeight=self.innerHeight;}else if(document.documentElement&&document.documentElement.clientHeight){windowWidth=document.documentElement.clientWidth;windowHeight=document.documentElement.clientHeight;}else if(document.body){windowWidth=document.body.clientWidth;windowHeight=document.body.clientHeight;}
|
||||
if(yScroll<windowHeight){pageHeight=windowHeight;}else{pageHeight=yScroll;}
|
||||
if(xScroll<windowWidth){pageWidth=xScroll;}else{pageWidth=windowWidth;}
|
||||
arrayPageSize=new Array(pageWidth,pageHeight,windowWidth,windowHeight);return arrayPageSize;};function ___getPageScroll(){var xScroll,yScroll;if(self.pageYOffset){yScroll=self.pageYOffset;xScroll=self.pageXOffset;}else if(document.documentElement&&document.documentElement.scrollTop){yScroll=document.documentElement.scrollTop;xScroll=document.documentElement.scrollLeft;}else if(document.body){yScroll=document.body.scrollTop;xScroll=document.body.scrollLeft;}
|
||||
arrayPageScroll=new Array(xScroll,yScroll);return arrayPageScroll;};function ___pause(ms){var date=new Date();curDate=null;do{var curDate=new Date();}
|
||||
while(curDate-date<ms);};return this.unbind('click').click(_initialize);};})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user