JQUERY MODAL YARDIM

11 yıl (15 mesaj)

Onbaşı

Konu Sahibi

İYİ GÜNLER ÖNCELİKLE ARKADAŞLAR BENİM TEK SORUNUM VAR

JQUERY-MODAL KULLANIYORUM SİTEMDE

RESİMLERİ GÖSTERİYORUM YAN YANA GEÇİŞLERİ YAPTIM KÖŞEYE YAZIYLA KAPAT YAPTIM FAKAT BİR TÜRLÜ

İLERİ GERİ BUTONLARINI RESİMLİ KOYAMADIM KODLARI SIRALAYIM BANA DÜZENLEYİP CEVAP YAZARSANIZ ÇOK SEVİMİRİM

jquery.modal.js KODLARI

/* 
   * 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);

jquery.modal.CSS KODLARI

	 
  /* 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;}

SON OLARAK SAYFA İÇİNDE ÇALIŞTIRDIĞIM KAPAT BUTON YAZIYLA

<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>

LÜTFEN YARDIMLARINIZI ESİRGEMEYİN SADECE İLERİ GERİ ORTADA BUTON İSTİYORUM

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

P

putumku

11 yıl (391 mesaj)

Yüzbaşı

html kodlarınıda vereydin keşke. Yada jsfiddle'a yükleseydin. Çözümde kolaylık sağlardı.

Bu mesaja 1 cevap geldi.

Z

zolderesmans

11 yıl (15 mesaj)

Onbaşı

Konu Sahibi

BUYUR KARDES YAPTIĞIM HTML KOD

<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>