Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: share popup

  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    303
    Thanks
    29
    Thanked 0 Times in 0 Posts

    share popup

    hi,

    i have googled this for 2+ days, to no avail................ so:

    i need some thing like what youtube have where you click share and a pop-up window opens with, say facebook share for example..........

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,276
    Thanks
    10
    Thanked 581 Times in 562 Posts
    you can get that from facebook's developer section. you can also use 3rd-party services like shareThis or disquss.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    303
    Thanks
    29
    Thanked 0 Times in 0 Posts
    ive got buttons, my own design...

    1. Disqus is a comment feature.
    and
    2. ShareThis, well u must sign in to share, if u want to share uploads u can't.....

    although the js is nice in the modal...................

    any help, thx.

  • #4
    Regular Coder
    Join Date
    May 2011
    Posts
    303
    Thanks
    29
    Thanked 0 Times in 0 Posts
    so can any1 help?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    I don't get it. On youtube, if you want to share via FB, twitter or google+ you have to sign in.

    so like rnd me says, wouldn't the developer APIs be the place to look?

  • #6
    Regular Coder
    Join Date
    May 2011
    Posts
    303
    Thanks
    29
    Thanked 0 Times in 0 Posts
    no no sorry u mis-read, the fb dev section is 1 sharing place, hence i have 9 or 10 sharing button........

    sorry i meant u mustbe signed i too shareThis to sharre..

    i've come up with:
    Code:
        /*** popups ***/
        $("a[rel='pop-up']").click(function () {
        	if($(this).attr("target")!=="_blank") {
            	var pop_w = '650';
                var pop_h = (typeof $(this).attr("data-height") !== "undefined") ? $(this).attr("data-height") : '350';
                var pop_left = (screen.width/2)-(pop_w/2);
                var pop_top = (screen.height/2)-(pop_h/2);
                var settings = "height="+pop_h+", width="+pop_w+", scrollTo, resizable=0, scrollbars=0, location=0, top="+pop_top+", left="+pop_left;  
                window.open(this.href, 'Popup', settings);  
                return false; 	
           	}
        });
    That's not workingg, why?

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    works fine for me, in that it opens a clone of the window that's open already.

    Is it supposed to do something else?

  • #8
    Regular Coder
    Join Date
    May 2011
    Posts
    303
    Thanks
    29
    Thanked 0 Times in 0 Posts
    how did u test??

    i used in a js file, it supposed to open a new window with my url thats in href=""

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Code:
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
    <a href="#" rel='pop-up'>click me</a>
    </div>
    <script type="text/javascript"> 
    $(document).ready(function() {
    $("a[rel='pop-up']").click(function () {
        	if($(this).attr("target")!=="_blank") {
            	var pop_w = '650';
                var pop_h = (typeof $(this).attr("data-height") !== "undefined") ? $(this).attr("data-height") : '350';
                var pop_left = (screen.width/2)-(pop_w/2);
                var pop_top = (screen.height/2)-(pop_h/2);
                var settings = "height="+pop_h+", width="+pop_w+", scrollTo, resizable=0, scrollbars=0, location=0, top="+pop_top+", left="+pop_left;  
                window.open(this.href, 'Popup', settings);  
                return false; 	
           	}
        });
    });
    </script>
    
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    Chris-2k (10-02-2012)

  • #10
    Regular Coder
    Join Date
    May 2011
    Posts
    303
    Thanks
    29
    Thanked 0 Times in 0 Posts
    ah thx, fixed......

    now how to display my modal on entering my site, i currently have:

    Code:
    <!-- basic fancybox setup -->
    <script type="text/javascript">
    	$(document).ready(function() {
    		$(".modalbox").fancybox();
    	});
    </script>

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    you can trigger a click on the link...
    Code:
    <script type="text/javascript"> 
    $(document).ready(function() {
    $("a[rel='pop-up']").bind('click', function() {
        	if($(this).attr("target")!=="_blank") {
            	var pop_w = '650';
                var pop_h = (typeof $(this).attr("data-height") !== "undefined") ? $(this).attr("data-height") : '350';
                var pop_left = (screen.width/2)-(pop_w/2);
                var pop_top = (screen.height/2)-(pop_h/2);
                var settings = "height="+pop_h+", width="+pop_w+", scrollTo, resizable=0, scrollbars=0, location=0, top="+pop_top+", left="+pop_left;  
                window.open(this.href, 'Popup', settings);  
                return false; 	
           	}
        });
    $("a[rel='pop-up']").trigger('click');	
    });
    
    </script>
    but all of that is going to be kind of meaningless if the user has pop-ups blocked. why not use a real modal window?

  • #12
    Regular Coder
    Join Date
    May 2011
    Posts
    303
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Chris-2k View Post
    ah thx, fixed......

    now how to display my modal on entering my site, i currently have:

    Code:
    <!-- basic fancybox setup -->
    <script type="text/javascript">
    	$(document).ready(function() {
    		$(".modalbox").fancybox();
    	});
    </script>

    That modal ^^ is supposed to pop-up on enterinng my site, it just shows my likebox and subscribe form.....

    So my question: how to display my modal on entering my site, i currently have it so u need to click a link, ii dont want.......

    I did js pop-ups because tbh i don't know how to do modals for sharing? want to help?

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    you would need to find the code in the modalbox function that actually opens the pop up. If this doesn't do it: $(".modalbox").fancybox();

    then I guess you should look at the click listener of the link that does and see if you can replicate that programatically.

    and if worst comes to worse, just hide the link and trigger the click on it anyway...

  • Users who have thanked xelawho for this post:

    Chris-2k (10-03-2012)

  • #14
    Regular Coder
    Join Date
    May 2011
    Posts
    303
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Could you help a i'm no js guy, here's my fancybox.js:
    Code:
    /*!
     * fancyBox - jQuery Plugin
     * version: 2.0.6 (16/04/2012)
     * @requires jQuery v1.6 or later
     *
     * Examples at http://fancyapps.com/fancybox/
     * License: www.fancyapps.com/fancybox/#license
     *
     * Copyright 2012 Janis Skarnelis - janis@fancyapps.com
     *
     */
    
    (function (window, document, $, undefined) {
    	"use strict";
    
    	var W = $(window),
    		D = $(document),
    		F = $.fancybox = function () {
    			F.open.apply( this, arguments );
    		},
    		didResize	= false,
    		resizeTimer	= null,
    		isTouch		= document.createTouch !== undefined,
    		isString	= function(str) {
    			return $.type(str) === "string";
    		},
    		isPercentage = function(str) {
    			return isString(str) && str.indexOf('%') > 0;
    		},
    		getValue = function(value, dim) {
    			if (dim && isPercentage(value)) {
    				value = F.getViewport()[ dim ] / 100 * parseInt(value, 10);
    			}
    
    			return Math.round(value) + 'px';
    		};
    
    	$.extend(F, {
    		// The current version of fancyBox
    		version: '2.0.5',
    
    		defaults: {
    			padding: 15,
    			margin: 20,
    
    			width: 800,
    			height: 600,
    			minWidth: 100,
    			minHeight: 100,
    			maxWidth: 9999,
    			maxHeight: 9999,
    
    			autoSize: true,
    			autoResize: !isTouch,
    			autoCenter : !isTouch,
    			fitToView: true,
    			aspectRatio: false,
    			topRatio: 0.5,
    
    			fixed: false,
    			scrolling: 'auto', // 'auto', 'yes' or 'no'
    			wrapCSS: '',
    
    			arrows: true,
    			closeBtn: true,
    			closeClick: false,
    			nextClick : false,
    			mouseWheel: true,
    			autoPlay: false,
    			playSpeed: 3000,
    			preload : 3,
    
    			modal: false,
    			loop: true,
    			ajax: { dataType: 'html', headers: { 'X-fancyBox': true } },
    			keys: {
    				next: [13, 32, 34, 39, 40], // enter, space, page down, right arrow, down arrow
    				prev: [8, 33, 37, 38], // backspace, page up, left arrow, up arrow
    				close: [27] // escape key
    			},
    
    			// Override some properties
    			index: 0,
    			type: null,
    			href: null,
    			content: null,
    			title: null,
    
    			// HTML templates
    			tpl: {
    				wrap: '<div class="fancybox-wrap"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
    				image: '<img class="fancybox-image" src="{href}" alt="" />',
    				iframe: '<iframe class="fancybox-iframe" name="fancybox-frame{rnd}" frameborder="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',
    				swf: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{href}" /><embed src="{href}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%" wmode="transparent"></embed></object>',
    				error: '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
    				closeBtn: '<div title="Close" class="fancybox-item fancybox-close"></div>',
    				next: '<a title="Next" class="fancybox-nav fancybox-next"><span></span></a>',
    				prev: '<a title="Previous" class="fancybox-nav fancybox-prev"><span></span></a>'
    			},
    
    			// Properties for each animation type
    			// Opening fancyBox
    			openEffect: 'fade', // 'elastic', 'fade' or 'none'
    			openSpeed: 300,
    			openEasing: 'swing',
    			openOpacity: true,
    			openMethod: 'zoomIn',
    
    			// Closing fancyBox
    			closeEffect: 'elastic', // 'elastic', 'fade' or 'none'
    			closeSpeed: 300,
    			closeEasing: 'swing',
    			closeOpacity: true,
    			closeMethod: 'zoomOut',
    
    			// Changing next gallery item
    			nextEffect: 'elastic', // 'elastic', 'fade' or 'none'
    			nextSpeed: 300,
    			nextEasing: 'swing',
    			nextMethod: 'changeIn',
    
    			// Changing previous gallery item
    			prevEffect: 'elastic', // 'elastic', 'fade' or 'none'
    			prevSpeed: 300,
    			prevEasing: 'swing',
    			prevMethod: 'changeOut',
    
    			// Enabled helpers
    			helpers: {
    				overlay: {
    					speedIn: 0,
    					speedOut: 300,
    					opacity: 0.8,
    					css: {
    						cursor: 'pointer'
    					},
    					closeClick: true
    				},
    				title: {
    					type: 'float' // 'float', 'inside', 'outside' or 'over'
    				}
    			},
    
    			// Callbacks
    			onCancel: $.noop, // If canceling
    			beforeLoad: $.noop, // Before loading
    			afterLoad: $.noop, // After loading
    			beforeShow: $.noop, // Before changing in current item
    			afterShow: $.noop, // After opening
    			beforeClose: $.noop, // Before closing
    			afterClose: $.noop // After closing
    		},
    
    		//Current state
    		group: {}, // Selected group
    		opts: {}, // Group options
    		coming: null, // Element being loaded
    		current: null, // Currently loaded element
    		isOpen: false, // Is currently open
    		isOpened: false, // Have been fully opened at least once
    		wrap: null,
    		skin: null,
    		outer: null,
    		inner: null,
    
    		player: {
    			timer: null,
    			isActive: false
    		},
    
    		// Loaders
    		ajaxLoad: null,
    		imgPreload: null,
    
    		// Some collections
    		transitions: {},
    		helpers: {},
    
    		/*
    		 *	Static methods
    		 */
    
    		open: function (group, opts) {
    			//Kill existing instances
    			F.close(true);
    
    			//Normalize group
    			if (group && !$.isArray(group)) {
    				group = group instanceof $ ? $(group).get() : [group];
    			}
    
    			F.isActive = true;
    
    			//Extend the defaults
    			F.opts = $.extend(true, {}, F.defaults, opts);
    
    			//All options are merged recursive except keys
    			if ($.isPlainObject(opts) && opts.keys !== undefined) {
    				F.opts.keys = opts.keys ? $.extend({}, F.defaults.keys, opts.keys) : false;
    			}
    
    			F.group = group;
    
    			F._start(F.opts.index || 0);
    		},
    
    		cancel: function () {
    			if (F.coming && false === F.trigger('onCancel')) {
    				return;
    			}
    
    			F.coming = null;
    
    			F.hideLoading();
    
    			if (F.ajaxLoad) {
    				F.ajaxLoad.abort();
    			}
    
    			F.ajaxLoad = null;
    
    			if (F.imgPreload) {
    				F.imgPreload.onload = F.imgPreload.onabort = F.imgPreload.onerror = null;
    			}
    		},
    
    		close: function (a) {
    			F.cancel();
    
    			if (!F.current || false === F.trigger('beforeClose')) {
    				return;
    			}
    
    			F.unbindEvents();
    
    			//If forced or is still opening then remove immediately
    			if (!F.isOpen || (a && a[0] === true)) {
    				$('.fancybox-wrap').stop().trigger('onReset').remove();
    
    				F._afterZoomOut();
    
    			} else {
    				F.isOpen = F.isOpened = false;
    
    				$('.fancybox-item, .fancybox-nav').remove();
    
    				F.wrap.stop(true).removeClass('fancybox-opened');
    				F.inner.css('overflow', 'hidden');
    
    				F.transitions[F.current.closeMethod]();
    			}
    		},
    
    		// Start/stop slideshow
    		play: function (a) {
    			var clear = function () {
    					clearTimeout(F.player.timer);
    				},
    				set = function () {
    					clear();
    
    					if (F.current && F.player.isActive) {
    						F.player.timer = setTimeout(F.next, F.current.playSpeed);
    					}
    				},
    				stop = function () {
    					clear();
    
    					$('body').unbind('.player');
    
    					F.player.isActive = false;
    
    					F.trigger('onPlayEnd');
    				},
    				start = function () {
    					if (F.current && (F.current.loop || F.current.index < F.group.length - 1)) {
    						F.player.isActive = true;
    
    						$('body').bind({
    							'afterShow.player onUpdate.player': set,
    							'onCancel.player beforeClose.player': stop,
    							'beforeLoad.player': clear
    						});
    
    						set();
    
    						F.trigger('onPlayStart');
    					}
    				};
    
    			if (F.player.isActive || (a && a[0] === false)) {
    				stop();
    			} else {
    				start();
    			}
    		},
    
    		next: function () {
    			if (F.current) {
    				F.jumpto(F.current.index + 1);
    			}
    		},
    
    		prev: function () {
    			if (F.current) {
    				F.jumpto(F.current.index - 1);
    			}
    		},
    
    		jumpto: function (index) {
    			if (!F.current) {
    				return;
    			}
    
    			index = parseInt(index, 10);
    
    			if (F.group.length > 1 && F.current.loop) {
    				if (index >= F.group.length) {
    					index = 0;
    
    				} else if (index < 0) {
    					index = F.group.length - 1;
    				}
    			}
    
    			if (F.group[index] !== undefined) {
    				F.cancel();
    
    				F._start(index);
    			}
    		},
    
    		reposition: function (e, onlyAbsolute) {
    			var pos;
    
    			if (F.isOpen) {
    				pos = F._getPosition(onlyAbsolute);
    
    				if (e && e.type === 'scroll') {
    					delete pos.position;
    
    					F.wrap.stop(true, true).animate(pos, 200);
    
    				} else {
    					F.wrap.css(pos);
    				}
    			}
    		},
    
    		update: function (e) {
    			if (!F.isOpen) {
    				return;
    			}
    
    			// Run this code after a delay for better performance
    			if (!didResize) {
    				resizeTimer = setTimeout(function () {
    					var current = F.current, anyway = !e || (e && e.type === 'orientationchange');
    
    					if (didResize) {
    						didResize = false;
    
    						if (!current) {
    							return;
    						}
    
    						if ((!e || e.type !== 'scroll') || anyway) {
    							if (current.autoSize && current.type !== 'iframe') {
    								F.inner.height('auto');
    								current.height = F.inner.height();
    							}
    
    							if (current.autoResize || anyway) {
    								F._setDimension();
    							}
    
    							if (current.canGrow && current.type !== 'iframe') {
    								F.inner.height('auto');
    							}
    						}
    
    						if (current.autoCenter || anyway) {
    							F.reposition(e);
    						}
    
    						F.trigger('onUpdate');
    					}
    				}, 200);
    			}
    
    			didResize = true;
    		},
    
    		toggle: function () {
    			if (F.isOpen) {
    				F.current.fitToView = !F.current.fitToView;
    
    				F.update();
    			}
    		},
    
    		hideLoading: function () {
    			D.unbind('keypress.fb');
    
    			$('#fancybox-loading').remove();
    		},
    
    		showLoading: function () {
    			F.hideLoading();
    
    			//If user will press the escape-button, the request will be canceled
    			D.bind('keypress.fb', function(e) {
    				if (e.keyCode === 27) {
    					e.preventDefault();
    					F.cancel();
    				}
    			});
    
    			$('<div id="fancybox-loading"><div></div></div>').click(F.cancel).appendTo('body');
    		},
    
    		getViewport: function () {
    			// See http://bugs.jquery.com/ticket/6724
    			return {
    				x: W.scrollLeft(),
    				y: W.scrollTop(),
    				w: isTouch && window.innerWidth ? window.innerWidth : W.width(),
    				h: isTouch && window.innerHeight ? window.innerHeight : W.height()
    			};
    		},
    
    		// Unbind the keyboard / clicking actions
    		unbindEvents: function () {
    			if (F.wrap) {
    				F.wrap.unbind('.fb');
    			}
    
    			D.unbind('.fb');
    			W.unbind('.fb');
    		},
    
    		bindEvents: function () {
    			var current = F.current,
    				keys = current.keys;
    
    			if (!current) {
    				return;
    			}
    
    			W.bind('resize.fb orientationchange.fb' + (current.autoCenter && !current.fixed ? ' scroll.fb' : ''), F.update);
    
    			if (keys) {
    				D.bind('keydown.fb', function (e) {
    					var code, target = e.target || e.srcElement;
    
    					// Ignore key combinations and key events within form elements
    					if (!e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && !(target && (target.type || $(target).is('[contenteditable]')))) {
    						code = e.keyCode;
    
    						if ($.inArray(code, keys.close) > -1) {
    							F.close();
    							e.preventDefault();
    
    						} else if ($.inArray(code, keys.next) > -1) {
    							F.next();
    							e.preventDefault();
    
    						} else if ($.inArray(code, keys.prev) > -1) {
    							F.prev();
    							e.preventDefault();
    						}
    					}
    				});
    			}
    
    			if ($.fn.mousewheel && current.mouseWheel && F.group.length > 1) {
    				F.wrap.bind('mousewheel.fb', function (e, delta) {
    					var target = e.target || null;
    
    					if (delta !== 0 && (!target || target.clientHeight === 0 || (target.scrollHeight === target.clientHeight && target.scrollWidth === target.clientWidth))) {
    						e.preventDefault();
    
    						F[delta > 0 ? 'prev' : 'next']();
    					}
    				});
    			}
    		},
    
    		trigger: function (event, o) {
    			var ret, obj = o || F[ $.inArray(event, ['onCancel', 'beforeLoad', 'afterLoad']) > -1 ? 'coming' : 'current' ];
    
    			if (!obj) {
    				return;
    			}
    
    			if ($.isFunction( obj[event] )) {
    				ret = obj[event].apply(obj, Array.prototype.slice.call(arguments, 1));
    			}
    
    			if (ret === false) {
    				return false;
    			}
    
    			if (obj.helpers) {
    				$.each(obj.helpers, function (helper, opts) {
    					if (opts && $.isPlainObject(F.helpers[helper]) && $.isFunction(F.helpers[helper][event])) {
    						F.helpers[helper][event](opts, obj);
    					}
    				});
    			}
    
    			$.event.trigger(event + '.fb');
    		},
    
    		isImage: function (str) {
    			return isString(str) && str.match(/\.(jpe?g|gif|png|bmp)((\?|#).*)?$/i);
    		},
    
    		isSWF: function (str) {
    			return isString(str) && str.match(/\.(swf)((\?|#).*)?$/i);
    		},
    
    		_start: function (index) {
    			var coming = {},
    				element = F.group[index] || null,
    				isDom,
    				href,
    				type,
    				rez,
    				hrefParts;
    
    			if (element && (element.nodeType || element instanceof $)) {
    				isDom = true;
    
    				if ($.metadata) {
    					coming = $(element).metadata();
    				}
    			}
    
    			coming = $.extend(true, {}, F.opts, {index : index, element : element}, ($.isPlainObject(element) ? element : coming));
    
    			// Re-check overridable options
    			$.each(['href', 'title', 'content', 'type'], function(i,v) {
    				coming[v] = F.opts[ v ] || (isDom && $(element).attr( v )) || coming[ v ] || null;
    			});
    
    			// Convert margin property to array - top, right, bottom, left
    			if (typeof coming.margin === 'number') {
    				coming.margin = [coming.margin, coming.margin, coming.margin, coming.margin];
    			}
    
    			// 'modal' propery is just a shortcut
    			if (coming.modal) {
    				$.extend(true, coming, {
    					closeBtn : false,
    					closeClick: false,
    					nextClick : false,
    					arrows : false,
    					mouseWheel : false,
    					keys : null,
    					helpers: {
    						overlay : {
    							css: {
    								cursor : 'auto'
    							},
    							closeClick : false
    						}
    					}
    				});
    			}
    
    			//Give a chance for callback or helpers to update coming item (type, title, etc)
    			F.coming = coming;
    
    			if (false === F.trigger('beforeLoad')) {
    				F.coming = null;
    				return;
    			}
    
    			type = coming.type;
    			href = coming.href || element;
    
    			///Check if content type is set, if not, try to get
    			if (!type) {
    				if (isDom) {
    					type = $(element).data('fancybox-type');
    
    					if (!type) {
    						rez = element.className.match(/fancybox\.(\w+)/);
    						type = rez ? rez[1] : null;
    					}
    				}
    
    				if (!type && isString(href)) {
    					if (F.isImage(href)) {
    						type = 'image';
    
    					} else if (F.isSWF(href)) {
    						type = 'swf';
    
    					} else if (href.match(/^#/)) {
    						type = 'inline';
    					}
    				}
    
    				// ...if not - display element itself
    				if (!type) {
    					type = isDom ? 'inline' : 'html';
    				}
    
    				coming.type = type;
    			}
    
    			// Check before try to load; 'inline' and 'html' types need content, others - href
    			if (type === 'inline' || type === 'html') {
    				if (!coming.content) {
    					if (type === 'inline') {
    						coming.content = $( isString(href) ? href.replace(/.*(?=#[^\s]+$)/, '') : href ); //strip for ie7
    
    					} else {
    						coming.content = element;
    					}
    				}
    
    				if (!coming.content || !coming.content.length) {
    					type = null;
    				}
    
    			} else if (!href) {
    				type = null;
    			}
    
    			/*
    			 * Add reference to the group, so it`s possible to access from callbacks, example:
    			 * afterLoad : function() {
    			 *     this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    			 * }
    			 */
    
    			if (type === 'ajax' && isString(href)) {
    				hrefParts = href.split(/\s+/, 2);
    
    				href = hrefParts.shift();
    				coming.selector = hrefParts.shift();
    			}
    
    			coming.href  = href;
    			coming.group = F.group;
    			coming.isDom = isDom;
    
    			switch (type) {
    				case 'image':
    					F._loadImage();
    					break;
    
    				case 'ajax':
    					F._loadAjax();
    					break;
    
    				case 'inline':
    				case 'iframe':
    				case 'swf':
    				case 'html':
    					F._afterLoad();
    					break;
    
    				default:
    					F._error( 'type' );
    			}
    		},
    
    		_error: function ( type ) {
    			F.hideLoading();
    
    			$.extend(F.coming, {
    				type      : 'html',
    				autoSize  : true,
    				minWidth  : 0,
    				minHeight : 0,
    				padding   : 15,
    				hasError  : type,
    				content   : F.coming.tpl.error
    			});
    
    			F._afterLoad();
    		},
    
    		_loadImage: function () {
    			// Reset preload image so it is later possible to check "complete" property
    			var img = F.imgPreload = new Image();
    
    			img.onload = function () {
    				this.onload = this.onerror = null;
    
    				F.coming.width  = this.width;
    				F.coming.height = this.height;
    
    				F._afterLoad();
    			};
    
    			img.onerror = function () {
    				this.onload = this.onerror = null;
    
    				F._error( 'image' );
    			};
    
    			img.src = F.coming.href;
    
    			if (img.complete === undefined || !img.complete) {
    				F.showLoading();
    			}
    		},
    
    		_loadAjax: function () {
    			F.showLoading();
    
    			F.ajaxLoad = $.ajax($.extend({}, F.coming.ajax, {
    				url: F.coming.href,
    				error: function (jqXHR, textStatus) {
    					if (F.coming && textStatus !== 'abort') {
    						F._error( 'ajax', jqXHR );
    
    					} else {
    						F.hideLoading();
    					}
    				},
    				success: function (data, textStatus) {
    					if (textStatus === 'success') {
    						F.coming.content = data;
    
    						F._afterLoad();
    					}
    				}
    			}));
    		},
    
    		_preloadImages: function() {
    			var group = F.group,
    				current = F.current,
    				len = group.length,
    				item,
    				href,
    				i,
    				cnt = Math.min(current.preload, len - 1);
    
    			if (!current.preload || group.length < 2) {
    				return;
    			}
    
    			for (i = 1; i <= cnt; i += 1) {
    				item = group[ (current.index + i ) % len ];
    				href = item.href || $( item ).attr('href') || item;
    
    				if (item.type === 'image' || F.isImage(href)) {
    					new Image().src = href;
    				}
    			}
    		},
    
    		_afterLoad: function () {
    			F.hideLoading();
    
    			if (!F.coming || false === F.trigger('afterLoad', F.current)) {
    				F.coming = false;
    
    				return;
    			}
    
    			if (F.isOpened) {
    				$('.fancybox-item, .fancybox-nav').remove();
    
    				F.wrap.stop(true).removeClass('fancybox-opened');
    				F.inner.css('overflow', 'hidden');
    
    				F.transitions[F.current.prevMethod]();
    
    			} else {
    				$('.fancybox-wrap').stop().trigger('onReset').remove();
    
    				F.trigger('afterClose');
    			}
    
    			F.unbindEvents();
    
    			F.isOpen    = false;
    			F.current   = F.coming;
    
    			//Build the neccessary markup
    			F.wrap  = $(F.current.tpl.wrap).addClass('fancybox-' + (isTouch ? 'mobile' : 'desktop') + ' fancybox-type-' + F.current.type + ' fancybox-tmp ' + F.current.wrapCSS).appendTo('body');
    			F.skin  = $('.fancybox-skin', F.wrap).css('padding', getValue(F.current.padding));
    			F.outer = $('.fancybox-outer', F.wrap);
    			F.inner = $('.fancybox-inner', F.wrap);
    
    			F._setContent();
    		},
    
    		_setContent: function () {
    			var current = F.current,
    				content = current.content,
    				type    = current.type,
    				minWidth    = current.minWidth,
    				minHeight   = current.minHeight,
    				maxWidth    = current.maxWidth,
    				maxHeight   = current.maxHeight,
    				loadingBay;
    
    			switch (type) {
    				case 'inline':
    				case 'ajax':
    				case 'html':
    					if (current.selector) {
    						content = $('<div>').html(content).find(current.selector);
    
    					} else if (content instanceof $) {
    						if (content.parent().hasClass('fancybox-inner')) {
    							content.parents('.fancybox-wrap').unbind('onReset');
    						}
    
    						content = content.show().detach();
    
    						$(F.wrap).bind('onReset', function () {
    							content.appendTo('body').hide();
    						});
    					}
    
    					if (current.autoSize) {
    						loadingBay = $('<div class="fancybox-wrap ' + F.current.wrapCSS + ' fancybox-tmp"></div>')
    							.appendTo('body')
    							.css({
    								minWidth    : getValue(minWidth, 'w'),
    								minHeight   : getValue(minHeight, 'h'),
    								maxWidth    : getValue(maxWidth, 'w'),
    								maxHeight   : getValue(maxHeight, 'h')
    							})
    							.append(content);
    
    						current.width = loadingBay.width();
    						current.height = loadingBay.height();
    
    						// Re-check to fix 1px bug in some browsers
    						loadingBay.width( F.current.width );
    	// Test for fixedPosition needs a body at doc ready
    	$(document).ready(function() {
    		F.defaults.fixed = $.support.fixedPosition || (!($.browser.msie && $.browser.version <= 6) && !isTouch);
    	});
    
    }(window, document, jQuery));
    Thx

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    just pass the id of the div that you are using for the fancybox to the open function...

    Code:
    	<script type="text/javascript">
    		$(document).ready(function() {
    			$('.fancybox').fancybox();
    		$.fancybox.open('#your_div_id');
    });
    	</script>

  • Users who have thanked xelawho for this post:

    Chris-2k (10-03-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •