git.sur5r.net Git - contagged/blob - scripts/interface/imagebox.js

   1 /**
   2  * Interface Elements for jQuery
   3  * ImageBox
   4  *
   5  * http://interface.eyecon.ro
   6  *
   7  * Copyright (c) 2006 Stefan Petre
   8  * Dual licensed under the MIT (MIT-LICENSE.txt)
   9  * and GPL (GPL-LICENSE.txt) licenses.
  10  *
  11  */
  12
  13 /**
  14  * This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.
  15  * Keyboard navigation:
  16  *  -  next image: arrow right, page down, 'n' key, space
  17  *  -  previous image: arrow left, page up, 'p' key, backspace
  18  *  -  close: escape
  19  *
  20  * CSS
  21  *      #ImageBoxOverlay
  22  *      {
  23  *              background-color: #000;
  24  *      }
  25  *      #ImageBoxCaption
  26  *      {
  27  *              background-color: #F4F4EC;
  28  *      }
  29  *      #ImageBoxContainer
  30  *      {
  31  *              width: 250px;
  32  *              height: 250px;
  33  *              background-color: #F4F4EC;
  34  *      }
  35  *      #ImageBoxCaptionText
  36  *      {
  37  *              font-weight: bold;
  38  *              padding-bottom: 5px;
  39  *              font-size: 13px;
  40  *              color: #000;
  41  *      }
  42  *      #ImageBoxCaptionImages
  43  *      {
  44  *              margin: 0;
  45  *      }
  46  *      #ImageBoxNextImage
  47  *      {
  48  *              background-image: url(images/imagebox/spacer.gif);
  49  *              background-color: transparent;
  50  *      }
  51  *      #ImageBoxPrevImage
  52  *      {
  53  *              background-image: url(images/imagebox/spacer.gif);
  54  *              background-color: transparent;
  55  *      }
  56  *      #ImageBoxNextImage:hover
  57  *      {
  58  *              background-image: url(images/imagebox/next_image.jpg);
  59  *              background-repeat:      no-repeat;
  60  *              background-position: right top;
  61  *      }
  62  *      #ImageBoxPrevImage:hover
  63  *      {
  64  *              background-image: url(images/imagebox/prev_image.jpg);
  65  *              background-repeat:      no-repeat;
  66  *              background-position: left bottom;
  67  *      }
  68  *
  69  * @name Imagebox
  70  * @description This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.
  71  * @param Hash hash A hash of parameters
  72  * @option Integer border border width
  73  * @option String loaderSRC path to loading image
  74  * @option String closeHTML path to close overlay image
  75  * @option Float overlayOpacity opacity for overlay
  76  * @option String textImage when a galalry it is build then the iteration is displayed
  77  * @option String textImageFrom when a galalry it is build then the iteration is displayed
  78  * @option Integer fadeDuration fade duration in miliseconds
  79  *
  80  * @type jQuery
  81  * @cat Plugins/Interface
  82  * @author Stefan Petre
  83  */
  84 jQuery.ImageBox = {
  85         options : {
  86                 border                          : 10,
  87                 loaderSRC                       : 'images/loading.gif',
  88                 closeHTML                       : '<img src="images/close.jpg" />',
  89                 overlayOpacity          : 0.8,
  90                 textImage                       : 'Showing image',
  91                 textImageFrom           : 'from',
  92                 fadeDuration            : 400
  93         },
  94         imageLoaded : false,
  95         firstResize : false,
  96         currentRel : null,
  97         animationInProgress : false,
  98         opened : false,
  99
 100         keyPressed : function(event)
 101         {
 102                 if(!jQuery.ImageBox.opened || jQuery.ImageBox.animationInProgress)
 103                         return;
 104                 var pressedKey = event.charCode || event.keyCode || -1;
 105                 switch (pressedKey)
 106                 {
 107                         //end
 108                         case 35:
 109                                 if (jQuery.ImageBox.currentRel)
 110                                         jQuery.ImageBox.start(null, jQuery('a[@rel=' + jQuery.ImageBox.currentRel+ ']:last').get(0));
 111                         break;
 112                         //home
 113                         case 36:
 114                                 if (jQuery.ImageBox.currentRel)
 115                                         jQuery.ImageBox.start(null, jQuery('a[@rel=' + jQuery.ImageBox.currentRel+ ']:first').get(0));
 116                         break;
 117                         //left
 118                         case 37:
 119                         //backspace
 120                         case 8:
 121                         //page up
 122                         case 33:
 123                         //p
 124                         case 80:
 125                         case 112:
 126                                 var prevEl = jQuery('#ImageBoxPrevImage');
 127                                 if(prevEl.get(0).onclick != null) {
 128                                         prevEl.get(0).onclick.apply(prevEl.get(0));
 129                                 }
 130                         break;
 131                         //up
 132                         case 38:
 133                         break;
 134                         //right
 135                         case 39:
 136                         //page down
 137                         case 34:
 138                         //space
 139                         case 32:
 140                         //n
 141                         case 110:
 142                         case 78:
 143                                 var nextEl = jQuery('#ImageBoxNextImage');
 144                                 if(nextEl.get(0).onclick != null) {
 145                                         nextEl.get(0).onclick.apply(nextEl.get(0));
 146                                 }
 147                         break;
 148                         //down;
 149                         case 40:
 150                         break;
 151                         //escape
 152                         case 27:
 153                                 jQuery.ImageBox.hideImage();
 154                         break;
 155                 }
 156         },
 157
 158         init : function(options)
 159         {
 160                 if (options)
 161                         jQuery.extend(jQuery.ImageBox.options, options);
 162                 if (window.event) {
 163                         jQuery('body',document).bind('keyup', jQuery.ImageBox.keyPressed);
 164                 } else {
 165                         jQuery(document).bind('keyup', jQuery.ImageBox.keyPressed);
 166                 }
 167                 jQuery('a').each(
 168                         function()
 169                         {
 170                                 el                              = jQuery(this);
 171                                 relAttr                 = el.attr('rel')||'';
 172                                 hrefAttr                = el.attr('href')||'';
 173                                 imageTypes              = /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;
 174                                 if (hrefAttr.toLowerCase().match(imageTypes) != null && relAttr.toLowerCase().indexOf('imagebox') == 0) {
 175                                         el.bind('click', jQuery.ImageBox.start);
 176                                 }
 177                         }
 178                 );
 179                 if (jQuery.browser.msie) {
 180                         iframe = document.createElement('iframe');
 181                         jQuery(iframe)
 182                                 .attr(
 183                                         {
 184                                                 id                      : 'ImageBoxIframe',
 185                                                 src                     : 'javascript:false;',
 186                                                 frameborder     : 'no',
 187                                                 scrolling       : 'no'
 188                                         }
 189                                 )
 190                                 .css (
 191                                         {
 192                                                 display         : 'none',
 193                                                 position        : 'absolute',
 194                                                 top                     : '0',
 195                                                 left            : '0',
 196                                                 filter          : 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'
 197                                         }
 198                                 );
 199                         jQuery('body').append(iframe);
 200                 }
 201
 202                 overlay = document.createElement('div');
 203                 jQuery(overlay)
 204                         .attr('id', 'ImageBoxOverlay')
 205                         .css(
 206                                 {
 207                                         position        : 'absolute',
 208                                         display         : 'none',
 209                                         top                     : '0',
 210                                         left            : '0',
 211                                         opacity         : 0
 212                                 }
 213                         )
 214                         .append(document.createTextNode(' '))
 215                         .bind('click', jQuery.ImageBox.hideImage);
 216
 217                 captionText = document.createElement('div');
 218                 jQuery(captionText)
 219                         .attr('id', 'ImageBoxCaptionText')
 220                         .css(
 221                                 {
 222                                         paddingLeft             : jQuery.ImageBox.options.border + 'px'
 223                                 }
 224                         )
 225                         .append(document.createTextNode(' '));
 226
 227                 captionImages = document.createElement('div');
 228                 jQuery(captionImages)
 229                         .attr('id', 'ImageBoxCaptionImages')
 230                         .css(
 231                                 {
 232                                         paddingLeft             : jQuery.ImageBox.options.border + 'px',
 233                                         paddingBottom   : jQuery.ImageBox.options.border + 'px'
 234                                 }
 235                         )
 236                         .append(document.createTextNode(' '));
 237
 238                 closeEl = document.createElement('a');
 239                 jQuery(closeEl)
 240                         .attr(
 241                                 {
 242                                         id                      : 'ImageBoxClose',
 243                                         href            : '#'
 244                                 }
 245                         )
 246                         .css(
 247                                 {
 248                                         position        : 'absolute',
 249                                         right           : jQuery.ImageBox.options.border + 'px',
 250                                         top                     : '0'
 251                                 }
 252                         )
 253                         .append(jQuery.ImageBox.options.closeHTML)
 254                         .bind('click', jQuery.ImageBox.hideImage);
 255
 256                 captionEl = document.createElement('div');
 257                 jQuery(captionEl)
 258                         .attr('id', 'ImageBoxCaption')
 259                         .css(
 260                                 {
 261                                         position        : 'relative',
 262                                         textAlign       : 'left',
 263                                         margin          : '0 auto',
 264                                         zIndex          : 1
 265                                 }
 266                         )
 267                         .append(captionText)
 268                         .append(captionImages)
 269                         .append(closeEl);
 270
 271                 loader = document.createElement('img');
 272                 loader.src = jQuery.ImageBox.options.loaderSRC;
 273                 jQuery(loader)
 274                         .attr('id', 'ImageBoxLoader')
 275                         .css(
 276                                 {
 277                                         position        : 'absolute'
 278                                 }
 279                         );
 280
 281                 prevImage = document.createElement('a');
 282                 jQuery(prevImage)
 283                         .attr(
 284                                 {
 285                                         id                      : 'ImageBoxPrevImage',
 286                                         href            : '#'
 287                                 }
 288                         )
 289                         .css(
 290                                 {
 291                                         position                : 'absolute',
 292                                         display                 : 'none',
 293                                         overflow                : 'hidden',
 294                                         textDecoration  : 'none'
 295                                 }
 296                         )
 297                         .append(document.createTextNode(' '));
 298
 299                 nextImage = document.createElement('a');
 300                 jQuery(nextImage)
 301                         .attr(
 302                                 {
 303                                         id                      : 'ImageBoxNextImage',
 304                                         href            : '#'
 305                                 }
 306                         )
 307                         .css(
 308                                 {
 309                                         position                : 'absolute',
 310                                         overflow                : 'hidden',
 311                                         textDecoration  : 'none'
 312                                 }
 313                         )
 314                         .append(document.createTextNode(' '));
 315
 316                 container = document.createElement('div');
 317                 jQuery(container)
 318                         .attr('id', 'ImageBoxContainer')
 319                         .css(
 320                                 {
 321                                         display         : 'none',
 322                                         position        : 'relative',
 323                                         overflow        : 'hidden',
 324                                         textAlign       : 'left',
 325                                         margin          : '0 auto',
 326                                         top                     : '0',
 327                                         left            : '0',
 328                                         zIndex          : 2
 329                                 }
 330                         )
 331                         .append([loader, prevImage, nextImage]);
 332
 333                 outerContainer = document.createElement('div');
 334                 jQuery(outerContainer)
 335                         .attr('id', 'ImageBoxOuterContainer')
 336                         .css(
 337                                 {
 338                                         display         : 'none',
 339                                         position        : 'absolute',
 340                                         overflow        : 'hidden',
 341                                         top                     : '0',
 342                                         left            : '0',
 343                                         textAlign       : 'center',
 344                                         backgroundColor : 'transparent',
 345                                         lineHeigt       : '0'
 346                                 }
 347                         )
 348                         .append([container,captionEl]);
 349
 350                 jQuery('body')
 351                         .append(overlay)
 352                         .append(outerContainer);
 353         },
 354
 355         start : function(e, elm)
 356         {
 357                 el = elm ? jQuery(elm) : jQuery(this);
 358                 linkRel =  el.attr('rel');
 359                 var totalImages, iteration, prevImage, nextImage;
 360                 if (linkRel != 'imagebox') {
 361                         jQuery.ImageBox.currentRel = linkRel;
 362                         gallery = jQuery('a[@rel=' + linkRel + ']');
 363                         totalImages = gallery.size();
 364                         iteration = gallery.index(elm ? elm : this);
 365                         prevImage = gallery.get(iteration - 1);
 366                         nextImage = gallery.get(iteration + 1);
 367                 }
 368                 imageSrc =  el.attr('href');
 369                 captionText = el.attr('title');
 370                 pageSize = jQuery.iUtil.getScroll();
 371                 overlay = jQuery('#ImageBoxOverlay');
 372                 if (!jQuery.ImageBox.opened) {
 373                         jQuery.ImageBox.opened = true;
 374                         if (jQuery.browser.msie) {
 375                                 jQuery('#ImageBoxIframe')
 376                                         .css ('height', Math.max(pageSize.ih,pageSize.h) + 'px')
 377                                         .css ('width', Math.max(pageSize.iw,pageSize.w) + 'px')
 378                                         .show();
 379                         }
 380                         overlay
 381                                 .css ('height', Math.max(pageSize.ih,pageSize.h) + 'px')
 382                                 .css ('width', Math.max(pageSize.iw,pageSize.w) + 'px')
 383                                 .show()
 384                                 .fadeTo(
 385                                         300,
 386                                         jQuery.ImageBox.options.overlayOpacity,
 387                                         function()
 388                                         {
 389                                                 jQuery.ImageBox.loadImage(
 390                                                         imageSrc,
 391                                                         captionText,
 392                                                         pageSize,
 393                                                         totalImages,
 394                                                         iteration,
 395                                                         prevImage,
 396                                                         nextImage
 397                                                 );
 398                                         }
 399                                 );
 400                         jQuery('#ImageBoxOuterContainer').css ('width', Math.max(pageSize.iw,pageSize.w) + 'px');
 401                 } else {
 402                         jQuery('#ImageBoxPrevImage').get(0).onclick = null;
 403                         jQuery('#ImageBoxNextImage').get(0).onclick = null;
 404                         jQuery.ImageBox.loadImage(
 405                                 imageSrc,
 406                                 captionText,
 407                                 pageSize,
 408                                 totalImages,
 409                                 iteration,
 410                                 prevImage,
 411                                 nextImage
 412                         );
 413                 }
 414                 return false;
 415         },
 416
 417         loadImage : function(imageSrc, captiontext, pageSize, totalImages, iteration, prevImage, nextImage)
 418         {
 419                 jQuery('#ImageBoxCurrentImage').remove();
 420                 prevImageEl = jQuery('#ImageBoxPrevImage');
 421                 prevImageEl.hide();
 422                 nextImageEl = jQuery('#ImageBoxNextImage');
 423                 nextImageEl.hide();
 424                 loader = jQuery('#ImageBoxLoader');
 425                 container = jQuery('#ImageBoxContainer');
 426                 outerContainer = jQuery('#ImageBoxOuterContainer');
 427                 captionEl = jQuery('#ImageBoxCaption').css('visibility', 'hidden');
 428                 jQuery('#ImageBoxCaptionText').html(captionText);
 429                 jQuery.ImageBox.animationInProgress = true;
 430                 if (totalImages)
 431                         jQuery('#ImageBoxCaptionImages').html(
 432                                 jQuery.ImageBox.options.textImage
 433                                 + ' ' + (iteration + 1) + ' '
 434                                 + jQuery.ImageBox.options.textImageFrom
 435                                 + ' ' + totalImages
 436                         );
 437                 if (prevImage) {
 438                         prevImageEl.get(0).onclick = function()
 439                         {
 440                                 this.blur();
 441                                 jQuery.ImageBox.start(null, prevImage);
 442                                 return false;
 443                         };
 444                 }
 445                 if (nextImage) {
 446                         nextImageEl.get(0).onclick =function()
 447                         {
 448                                 this.blur();
 449                                 jQuery.ImageBox.start(null, nextImage);
 450                                 return false;
 451                         };
 452                 }
 453                 loader.show();
 454                 containerSize = jQuery.iUtil.getSize(container.get(0));
 455                 containerW = Math.max(containerSize.wb, loader.get(0).width + jQuery.ImageBox.options.border * 2);
 456                 containerH = Math.max(containerSize.hb, loader.get(0).height + jQuery.ImageBox.options.border * 2);
 457                 loader
 458                         .css(
 459                                 {
 460                                         left    : (containerW - loader.get(0).width)/2 + 'px',
 461                                         top             : (containerH - loader.get(0).height)/2 + 'px'
 462                                 }
 463                         );
 464                 container
 465                         .css(
 466                                 {
 467                                         width   : containerW + 'px',
 468                                         height  : containerH + 'px'
 469                                 }
 470                         )
 471                         .show();
 472                 clientSize = jQuery.iUtil.getClient();
 473                 outerContainer
 474                         .css('top', pageSize.t +  (clientSize.h / 15) + 'px');
 475                 if (outerContainer.css('display') == 'none') {
 476                         outerContainer
 477                                 .show()
 478                                 .fadeIn(
 479                                         jQuery.ImageBox.options.fadeDuration
 480                                 );
 481                 }
 482                 imageEl = new Image;
 483                 jQuery(imageEl)
 484                         .attr('id', 'ImageBoxCurrentImage')
 485                         .bind('load',
 486                         function()
 487                         {
 488                                 containerW = imageEl.width + jQuery.ImageBox.options.border * 2;
 489                                 containerH = imageEl.height + jQuery.ImageBox.options.border * 2;
 490                                 loader.hide();
 491                                 container.animate(
 492                                         {
 493                                                 height          : containerH
 494                                         },
 495                                         containerSize.hb != containerH ? jQuery.ImageBox.options.fadeDuration : 1,
 496                                         function()
 497                                         {
 498                                                 container.animate(
 499                                                         {
 500                                                                 width           : containerW
 501                                                         },
 502                                                         containerSize.wb != containerW ? jQuery.ImageBox.options.fadeDuration : 1,
 503                                                         function()
 504                                                         {
 505                                                                 container.prepend(imageEl);
 506                                                                 jQuery(imageEl)
 507                                                                         .css(
 508                                                                                 {
 509                                                                                         position        : 'absolute',
 510                                                                                         left            : jQuery.ImageBox.options.border + 'px',
 511                                                                                         top                     : jQuery.ImageBox.options.border + 'px'
 512                                                                                 }
 513                                                                         )
 514                                                                         .fadeIn(
 515                                                                                 jQuery.ImageBox.options.fadeDuration,
 516                                                                                 function()
 517                                                                                 {
 518                                                                                         captionSize = jQuery.iUtil.getSize(captionEl.get(0));
 519                                                                                         if (prevImage) {
 520                                                                                                 prevImageEl
 521                                                                                                         .css(
 522                                                                                                                 {
 523                                                                                                                         left    : jQuery.ImageBox.options.border + 'px',
 524                                                                                                                         top             : jQuery.ImageBox.options.border + 'px',
 525                                                                                                                         width   : containerW/2 - jQuery.ImageBox.options.border * 3 + 'px',
 526                                                                                                                         height  : containerH - jQuery.ImageBox.options.border * 2 + 'px'
 527                                                                                                                 }
 528                                                                                                         )
 529                                                                                                         .show();
 530                                                                                         }
 531                                                                                         if (nextImage) {
 532                                                                                                 nextImageEl
 533                                                                                                         .css(
 534                                                                                                                 {
 535                                                                                                                         left    : containerW/2 + jQuery.ImageBox.options.border * 2 + 'px',
 536                                                                                                                         top             : jQuery.ImageBox.options.border + 'px',
 537                                                                                                                         width   : containerW/2 - jQuery.ImageBox.options.border * 3 + 'px',
 538                                                                                                                         height  : containerH - jQuery.ImageBox.options.border * 2 + 'px'
 539                                                                                                                 }
 540                                                                                                         )
 541                                                                                                         .show();
 542                                                                                         }
 543                                                                                         captionEl
 544                                                                                                 .css(
 545                                                                                                         {
 546                                                                                                                 width           : containerW + 'px',
 547                                                                                                                 top                     : - captionSize.hb + 'px',
 548                                                                                                                 visibility      : 'visible'
 549                                                                                                         }
 550                                                                                                 )
 551                                                                                                 .animate(
 552                                                                                                         {
 553                                                                                                                 top             : -1
 554                                                                                                         },
 555                                                                                                         jQuery.ImageBox.options.fadeDuration,
 556                                                                                                         function()
 557                                                                                                         {
 558                                                                                                                 jQuery.ImageBox.animationInProgress = false;
 559                                                                                                         }
 560                                                                                                 );
 561                                                                                 }
 562                                                                         );
 563                                                         }
 564                                                 );
 565                                         }
 566                                 );
 567                         }
 568                 );
 569                 imageEl.src = imageSrc;
 570
 571         },
 572
 573         hideImage : function()
 574         {
 575                 jQuery('#ImageBoxCurrentImage').remove();
 576                 jQuery('#ImageBoxOuterContainer').hide();
 577                 jQuery('#ImageBoxCaption').css('visibility', 'hidden');
 578                 jQuery('#ImageBoxOverlay').fadeTo(
 579                         300,
 580                         0,
 581                         function(){
 582                                 jQuery(this).hide();
 583                                 if (jQuery.browser.msie) {
 584                                         jQuery('#ImageBoxIframe').hide();
 585                                 }
 586                         }
 587                 );
 588                 jQuery('#ImageBoxPrevImage').get(0).onclick = null;
 589                 jQuery('#ImageBoxNextImage').get(0).onclick = null;
 590                 jQuery.ImageBox.currentRel = null;
 591                 jQuery.ImageBox.opened = false;
 592                 jQuery.ImageBox.animationInProgress = false;
 593                 return false;
 594         }
 595 };