JQUERY MODAL YARDIM

/* 
   * jQuery Modal Plugin v0.1.3 
   * 
   * Copyright (c) 2011 Richard Scarrott 
   *http://www.richardscarrott.co.uk 
   * 
   * Dual licensed under the MIT and GPL licenses: 
   *http://www.opensource.org/licenses/mit-license.php 
   *http://www.gnu.org/licenses/gpl.html 
   * 
   */ 
    
  (function ($, undefined) { 
   
  	$.modal = function (content, options) { 
  		$.modal._open(content, options); 
  	}; 
  	 
  	$.extend($.modal, { 
  	 
  		version: '0.3.0', 
  		 
  		isInitialized: false, 
  		 
  		isOpen: false, 
  		 
  		defaults: { 
  		 
  			// settings 
  			width: 'auto', 
  			height: 'auto', 
  			maxWidth: 600, 
  			maxHeight: 600, 
  			fitViewport: true, 
  			keepAspect: false, 
  			modal: true, 
  			transitionSpeed: 200, 
  			closeText: 'close X', 
  			extraClasses: null, 
  			appendTo: 'body', 
  			position: null, // [top, left], 
  			closeSelector: '.modal-content-close', 
  			closeKeyCode: 27, // Esc, 
  			closeOverlay: true, 
  			overlayOpacity: 0.5, 
  			openSpeed: 'fast', 
              closeSpeed: 'fast', 
  			className: null, 
  			overlayClassName: null, 
  			 
  			// callbacks 
  			init: $.noop, 
              beforeOpen: $.noop, 
              afterOpen: $.noop, 
              beforeClose: $.noop, 
              afterClose: $.noop, 
              afterResize: $.noop 
  		}, 
  		 
  		_init: function (options) { 
  			 
  			this.options = $.extend({}, this.defaults, options); 
  			 
  			if (!this.isInitialized) { 
  				this._objects(); 
  				this._events(); 
  				this.options.init(this.objects); 
  				this.isInitialized = true; 
  			} 
  			 
  			return; 
  		}, 
  		 
  		// creates and adds modal to DOM 
  		_objects: function() { 
  		 
  			this.objects = {}; 
  		 
  			this.objects.modal = $('<div />', { 
  				'class': 'modal' 
  			}); 
  			 
  			this.objects.content = $('<div />', { 
  				'class': 'modal-content' 
  			}) 
  			.appendTo(this.objects.modal); 
  			 
  			this.objects.closeBtn = $('<span />', { 
  				'class': 'modal-next', 
  				text: this.options.nextText 
  			}) 
  			this.objects.closeBtn = $('<span />', { 
  				'class': 'modal-close', 
  				text: this.options.closeText 
  			}) 
  			.appendTo(this.objects.modal); 
  			 
  			this.objects.overlay = $('<div />', { 
  				'class': 'modal-overlay' 
  			}) 
  			.appendTo(this.options.appendTo); 
  			 
  			this.objects.modal.appendTo(this.options.appendTo); 
  			 
  			return; 
  		}, 
  		 
  		_events: function () { 
  			 
  			var self = this, 
  				closeSelector = this.options.closeSelector ? 
  					this.options.closeSelector + ', .modal-close' : '.modal-close'; 
  			 
  			this.objects.modal.delegate(closeSelector, 'click.modal', function (e) { 
  				e.preventDefault(); 
  				 
  				self.close(); 
  				 
  			}); 
  			 
  			this.objects.overlay.bind('click.modal', function (e) { 
  				if (self.options.closeOverlay) { 
  					self.close(); 
  				} 
  			}); 
  			 
  			$(window).bind('resize.modal', function () { 
  				self.refresh(); 
  			}); 
  			 
  			$(document) 
  				.bind('keyup.modal', function (e) { 
  				 
  					if (e.keyCode === self.options.closeKeyCode) { 
  						self.close(); 
  					} 
  					 
  				}); 
  			 
  			return; 
  		}, 
  		 
  		// appends contents and opens modal 
  		_open: function (content, options) { 
  			 
  			var self = this, 
  				speed; 
  			 
  			this._init(options); 
  			 
  			speed = this.isOpen ? 0 : this.options.transitionSpeed; 
  			 
  			this.objects.content.empty(); 
  			 
  			if (content) { 
  				this.objects.content.append(content); 
  			} 
  			 
  			this._resetStyles(); 
  			 
  			this.objects.modal 
  				.removeClass() 
  				// add '.modal' back as it's been removed above (cannot just remove extraClasses, in cases where extraClasses have changed)  
  				.addClass(this.options.extraClasses ? 'modal ' + this.options.extraClasses : 'modal') 
  				.css(this._getPosition()); 
  			 
  			this.options.beforeOpen(this.objects); 
  			this.objects.modal.fadeIn(speed, function () { 
  				 
  				self.objects.modal.addClass('modal-isopen'); 
  				self.options.afterOpen(self.objects); 
  				 
  			}); 
  			 
  			if (this.options.modal) { 
  				this.objects.overlay.fadeTo(speed, this.options.overlayOpacity); 
  			} 
  			 
  			this.isOpen = true; 
  			 
  			return; 
  		}, 
  		 
  		refresh: function () { 
  			 
  			if (this.isOpen) { 
  				 
  				this._resetStyles(); 
  				this.objects.modal 
  					.removeClass('modal-isopen') 
  					.css(this._getPosition()) 
  					.addClass('modal-isopen') 
  					.show(); 
  				 
  				if (this.options.modal) { 
  					this.objects.overlay 
  						.css('opacity', this.options.overlayOpacity) 
  						.show(); 
  				} 
  			} 
  			 
  			return; 
  		}, 
  		 
  		// updates modal with new content, options will persist 
  		update: function (newContent, options) { 
  			 
  			if (this.isOpen) { 
  				this._open(newContent, $.extend(this.options, options)); 
  			} 
  			 
              return; 
  		}, 
  		 
  		// helper method to indicate loading 
  		loading: function (beforeClose) { 
  			 
  			this._open(undefined, { 
  				extraClasses: 'modal-isloading', 
  				beforeClose: beforeClose || $.noop 
  			}); 
  			 
  			return; 
  		}, 
  		 
  		close: function (animate) { 
  		 
  			var self = this, 
  				speed = animate || animate === undefined ? this.options.transitionSpeed : 0; 
  			 
  			this.options.beforeClose(this.objects); 
  			 
  			this.objects.modal.fadeOut(speed, function () { 
  			 
  				self._resetStyles(); 
  				self.objects.modal.removeClass('modal-isopen'); 
  				self.options.afterClose(self.objects); 
  				 
  			}); 
   
  			if (this.options.modal) { 
  				this.objects.overlay.fadeOut(speed); 
  			} 
  			 
  			this.isOpen = false; 
  			 
  			return; 
  		}, 
  		 
  		// removes all style attributes, NOTE: CSS should hide .modal by default 
  		_resetStyles: function () { 
  		 
  			this.objects.modal 
  				.add(this.objects.overlay) 
  					.attr('style', ''); 
  				 
  			return; 
  		}, 
  		 
  		// return top, left, width and height of modal 
  		_getPosition: function () { 
  			 
  			var win = $(window), 
                  doc = $(document), 
                  options = this.options, 
  				top, 
  				left, 
  				width = options.width, 
  				height = options.height, 
  				maxWidth = options.maxWidth, 
  				maxHeight = options.maxHeight, 
  				oldWidth, 
  				oldHeight, 
  				boxModelWidth = this.objects.modal.outerWidth(true) - this.objects.modal.width(), // padding, border, margin 
  				boxModelHeight = this.objects.modal.outerHeight(true) - this.objects.modal.height(), // padding, border, margin 
  				viewport = { 
  					x: win.width() - boxModelWidth, 
  					y: win.height() - boxModelHeight 
  				}, 
  				scrollPos = { 
  					x: doc.scrollLeft(), 
  					y: doc.scrollTop() 
  				}, 
  				centreCoords = { 
  					x: (viewport.x / 2) + scrollPos.x, 
  					y: (viewport.y / 2) + scrollPos.y 
  				}; 
  			 
  			// get natural height 
  			if (height === 'auto') { 
  				// ensure that if we set the width to maxWidth when calculating natural height 
  				// it's actually the smallest it'll ever be, i.e. the viewport might be smaller causing the content to be smaller 
  				var w = maxWidth > viewport.x ? viewport.x : maxWidth; 
  				 
  				// if container width is auto or exceeds maxwidth set to maxwidth else set to container width 
  				this.objects.modal.width(maxWidth && width === 'auto' || maxWidth && width > maxWidth ? w : width); 
  				height = this.objects.modal.height(); 
  				this.objects.modal.width(''); 
  			} 
  			 
  			// get natural width 
  			if (width === 'auto') { 
  				var h = maxHeight > viewport.y ? viewport.y : maxHeight; 
  				// we know here that height will bo longer be 'auto' 
  				this.objects.modal.height(maxHeight && height > maxHeight ? h : height); 
  				width = this.objects.modal.width(); 
  				this.objects.modal.height(''); 
  			} 
  			 
  			// set old width to then calculate aspect (before it possibly gets skewed by maxwidth and maxheight) 
  			oldWidth = width; 
  			oldHeight = height; 
  			 
  			// check maxWidth and maxHeight 
  			width = maxWidth && width > maxWidth ? maxWidth : width; 
  			height = maxHeight && height > maxHeight ? maxHeight : height; 
  			 
  			// check modal fits in viewport 
  			if (options.fitViewport) { 
  				width = width > viewport.x ? viewport.x : width; 
  				height = height > viewport.y ? viewport.y : height; 
  			} 
  			 
  			// check aspect ratio 
  			if (options.keepAspect) { 
  				var h = height; // current height 
  				 
  				height = oldHeight * width / oldWidth; 
  				 
  				// if h is greater than height then adjust width instead 
  				if (height > h) { 
  					width = oldWidth * h / oldHeight; 
  					height = h; 
  				} 
  			} 
  			 
  			if ($.isArray(this.options.position)) { 
  				top = this.options.position[0]; 
  				left = this.options.position[1]; 
  			} 
  			else { 
  				// set coords 
  				top = centreCoords.y - (height / 2); 
  				left = centreCoords.x - (width / 2); 
  				 
  				// check popup doesn't display outisde of document 
  				if (!options.fitViewport) { 
  					top = top < scrollPos.y ? scrollPos.y : top; 
  					left = left < scrollPos.x ? scrollPos.x : left; 
  				} 
  			} 
   
  			return { 
  				width: width, 
  				height: height, 
  				top: top, 
  				left: left 
  			} 
  		}, 
  		 
  		// removes modal from DOM 
  		destroy: function () { 
  			 
              $(window).unbind('.modal'); 
  			$(document).unbind('.modal'); 
  			this.objects.modal.remove(); 
  			this.objects.overlay.remove(); 
  			this.isOpen = false; 
  			this.isInitialized = false; 
  			 
              return; 
  		} 
  		 
  	}); 
  	$(document).ready(function() { 
      var divs = $('.mydivs>div'); 
      var now = 0; // currently shown div 
      divs.hide().first().show(); // hide all divs except first 
      $("button[name=next]").click(function() { 
          divs.eq(now).hide(); 
          now = (now + 1 < divs.length) ? now + 1 : 0; 
          divs.eq(now).show(); // show next 
      }); 
      $("button[name=prev]").click(function() { 
          divs.eq(now).hide(); 
          now = (now > 0) ? now - 1 : divs.length - 1; 
          divs.eq(now).show(); // show previous 
      }); 
  }); 
  })(jQuery); 
   
  // some IE6 nonsense 
  (function ($, modal, undefined) { 
  	 
  	if ($.browser.msie && $.browser.version.substr(0, 1) <= 6) { 
  	 
  		var _events = modal._events, 
  			_open = modal._open, 
  			close = modal.close, 
  			selectBoxes; 
  			 
  		$.extend(modal, { 
  			 
  			_events: function () { 
  			 
  				var self = this; 
  				 
  				_events.apply(this, arguments); 
  				 
  				// dom ready 
  				selectBoxes = $('select'); 
  				 
  				$(window).bind('resize.modal', function () { 
  				 
  					if (self.isOpen) { 
  						self._sizeOverlay(); 
  					} 
  					 
  				}); 
  				 
  				return; 
  			}, 
  			 
  			_open: function (content, options) { 
  				 
  				_open.apply(this, arguments); 
  				 
  				selectBoxes.css('visibility', 'hidden'); 
  				this._sizeOverlay(); 
  				 
  				return; 
  			}, 
  			 
  			close: function () { 
  				 
  				var self = this; 
  				 
  				close.apply(this, arguments); 
  				 
  				setTimeout(function () { 
  				 
  					selectBoxes.css('visibility', ''); 
  				 
  				}, this.options.transitionSpeed); 
  				 
  				return; 
  			}, 
  			 
  			_sizeOverlay: function () { 
  				 
  				var doc = $(document); 
  					 
  				this.objects.overlay 
  					.width(doc.width()) 
  					.height(doc.height()); 
  				 
  				return; 
  			} 
  			 
  		}); 
  	 
  	} 
  	 
  })(jQuery, jQuery.modal);

	 
  /* functional styles */ 
   
  .modal { 
      position: absolute; 
      display: none; 
      z-index:1000; 
  } 
   
  .modal-content { 
      height: 100%; 
      overflow: auto; 
      width: 100%; 
  } 
   
  .modal-overlay { 
      bottom: 0; 
      display: none; 
      left: 0; 
      position: fixed; 
      _position: absolute; 
      right: 0; 
      top: 0; 
      z-index: 500; 
  } 
   
  /* aesthetic styles */ 
   
  .modal { 
      background: #fff; 
      border: 10px solid gray; 
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
      margin: 25px; 
      padding: 30px; 
  } 
   
  .modal-close { 
      color: #444; 
      cursor: pointer; 
      font-size: 10px; 
      font-weight: bold; 
      position: absolute; 
      right: 8px; 
      text-decoration: none; 
      text-transform: uppercase; 
      top: 8px; 
  	 
  } 
   
  .modal-overlay { 
      background: #000; 
  } 
   
  .modal-1 { 
      background: #333; 
      border-color: #444; 
      border-width: 3px; 
      color: #f2f2f2; 
      margin: 10px; 
      padding: 15px; 
  } 
   
  .modal-1 .modal-close { 
      color: #f2f2f2; 
  } 
   
  .modal-1 a { 
      color: yellow; 
  } 
   
  .modal-isloading { 
      background: #fff url(loader.gif) center center no-repeat; 
      border: none; 
      padding: 0; 
      -moz-border-radius: 10px; 
      -webkit-border-radius: 10px; 
      border-radius: 10px; 
      width: 50px; 
      height: 50px; 
  } 
   
  .modal-isloading .modal-close { 
      display:none; 
  } 
  .pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;} 
  	.pika-imgnav a.previous {background: url(../images/prev.png) no-repeat left 50%; height: 340px; width: 50px; top: 10px; left: 10px;cursor:pointer;} 
  	.pika-imgnav a.next {background: url(../images/next.png) no-repeat right 50%; height: 340px; width: 50px; top: 10px; right: 10px;cursor:pointer;} 
  	.pika-imgnav a.play {background: url(../images/play.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:46%;display: none;cursor:pointer;} 
  	.pika-imgnav a.pause {background: url(../images/pause.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:46%;display:none;cursor:pointer;}

<script type="text/javascript"> 
  /* <![CDATA[ */ 
  $(function () { 
      $(".thumb-pr").click(function () { 
          img = $(this).attr('href'); 
          $("#img-holder img").attr('src', img); 
          return false; 
      }); 
      $(".show-image").click(function () { 
          var src = $(this).children('img').attr('src'); 
          $.modal($('<img src="'+ src +'" />'), { 
              keepAspect: true, 
  		    closeText:'KAPAT X' 
          }); 
          return false; 
      }); 
  }); 
  /* ]]> */ 
  </script> 
  

<div id="corp-image"> 
                  <div id="img-holder"> 
                      <a title="Göster" href="#" class="show-image"> 
                          <?php echo product_image(2, (isset($images[0]['url']) ? $images[0]['url'] : 'a'), $id, $title, array("class" => "", 'data-big' => "asas")); ?> 
                      </a> 
                  </div> 
                  <?php if(count($images)>1):?> 
                  <ul class="thumbs clearfix"> 
                      <?php foreach ($images as $image):?> 
                      <li>  
                          <a title="<?=$title;?>" href="<?php echo config_item('gallery_upload_path') . $image['product_id'] . '/' . $image['url']; ?>" class="thumb-pr">  
                              <?php echo product_image(3, $image['url'], $image['product_id'], $title); ?> 
                          </a> 
                      </li> 
                      <?php endforeach;?> 
                  </ul> 
                  <?php endif;?> 
              </div>