Помогите прикрутить к слайдеру Colorbox

rus999 · December 15, 2011

В общем имеется две проблемы это слайдер использует одну JQuery а Colorbox другую а вместе отказываются работать.

Ну а вторая проблема это то что нужно вызывать Colorbox со средней картинки слайдера.

В общем очень сильно нуждаюсь в помощи мастера!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
	<style>
/*СЛАЙДЕР*/
#wrapper_slider * {
	border:none;
}
#wrapper_slider {
	width:610px;
	height:230px;
	padding-top:90px;
	display:inline-block;
	margin-left:50px;
}
.mb-wrapper {
	width: 900px;
	min-height: 200px;
	margin: 0 auto;
	position: relative;
	left: 0;
	top: 0;
}
.mb-slider, .mb-scroll {
	width: 600px;
	height: 400px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	position: relative;
	left: 0;
	top: 0;
	font-size: 18px;
}
.mb-slider .mb-panel {
	width: 400px;
	margin: 5px 0;
	padding: 5px;
	display: block;
	cursor: pointer;
	float: left;
	list-style: none;
}
#container #main #content #wrapper_slider #slider-one .mb-panel.current .mb-inside img {
	transition: all 0.26s ease-out;
	-webkit-transition: all 0.26s ease-out;
	-moz-transition: all 0.26s ease-out;
	-ms-transition: all 0.26s ease-out;
	-o-transition: all 0.26s ease-out;	
	margin-top:-20px;
}

.mb-slider .mb-panel.current {
	cursor: auto;
}
.mb-inside {
	padding: 10px;
	border: 1px solid #999;
}
.mb-inside * {
	max-width: 100%;
}
a.mb-scrollButtons {
	display: block;
	width: 45px;
	height: 58px;
	background: transparent url(img/site/arrows.png) no-repeat;
	position: absolute;
	top: 50%;
	margin-top: -29px;
	cursor: pointer;
	text-decoration: none;
	outline: 0;
	border: 0;
}
a.mb-scrollButtons.mb-left {
	background-position: left top;
	top:90px;
	left: -85px;
}
a.mb-scrollButtons.mb-right {
	background-position: right top;
	top:90px;
	right: -95px;
}
a.mb-scrollButtons.mb-left:hover {
	background-position: left bottom;
}
a.mb-scrollButtons.mb-right:hover {
	background-position: right bottom;
}
a.mb-scrollButtons.disabled {
	display: none;
}
.mb-controls {
	margin: 0 auto;
	text-align: center;
	background: #ccc;
	position: relative;
	z-index: 100;
}
.mb-controls a {
	color: #444;
	font: 12px Georgia, Serif;
	display: inline-block;
	text-decoration: none;
	padding: 2px;
	height: 18px;
	margin: 0 5px 0 0;
	text-align: center;
	outline: 0;
}
.mb-controls a.current, .mb-controls a:hover {
	color: #fff;
}
.mb-active-slider .mb-controls {
	background: #999bff;
}
/*СЛАЙДЕР*/
	</style>
    	<style>
		body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
		a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
		h2{font-size:13px; margin:15px 0 0 0;}
	</style>    

	<script src="jquery-1.6.1.js"></script>
    <script src="jquery.movingboxes.js"></script>
    <script src="slider.js"></script>
    <link href="colorbox.css" rel="stylesheet" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="jquery.colorbox.js"></script>    
    <script>
		$(document).ready(function(){
			//Examples of how to assign the ColorBox event to elements
			$(".group1").colorbox({rel:'group1'});
			$(".group2").colorbox({rel:'group2', transition:"fade"});
			$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
			$(".group4").colorbox({rel:'group4', slideshow:true});
			$(".ajax").colorbox();
			$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
			$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
			$(".inline").colorbox({inline:true, width:"50%"});
			$(".callbacks").colorbox({
				onOpen:function(){ alert('onOpen: colorbox is about to open'); },
				onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
				onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
				onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
				onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
			});

			//Example of preserving a JavaScript event for inline calls.
			$("#click").click(function(){ 
				$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
				return false;
			});
		});
	</script>
</head>

<body>
<!--Вызов колорбокса Пример: -->
	<h2>Elastic Transition</h2>
	<p><a class="group1" href="content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>


     <!--СЛАЙДЕР -->
      <div id="wrapper_slider">
      <h2>Галерея</h2>
        <ul id="slider-one">
          <li>
            <a class="group2" href="#"><img src="demo/1.jpg" alt="picture"></a>
          </li>
          <li>
            <img src="demo/1.jpg"  alt="picture">
          </li>
          <li>
            <img src="demo/3.jpg" alt="picture">
          </li>
          <li>
            <img src="demo/4.jpg" alt="picture">
          </li>
          <li>
            <img src="demo/5.jpg" alt="picture">
          </li>
          <li>
            <img src="demo/6.jpg" alt="picture">
          </li>
          <li>
            <img src="demo/7.jpg" alt="picture">
          </li>
        </ul> 
      </div> 
      <!--СЛАЙДЕР -->

</body>
</html>

А вот код самого слайдера


(function($){
	$.movingBoxes = function(el, options){
		// To avoid scope issues, use 'base' instead of 'this'
		// to reference this class from internal events and functions.
		var o, base = this;

		// Access to jQuery and DOM versions of element
		base.$el = $(el).addClass('mb-slider');
		base.el = el;

		// Add a reverse reference to the DOM object
		base.$el.data('movingBoxes', base);

		base.init = function(){
			base.options = o = $.extend({}, $.movingBoxes.defaultOptions, options);

			// Setup formatting (to reduce the amount of initial HTML)
			base.$el.wrap('<div class="movingBoxes mb-wrapper"><div class="mb-scroll" /></div>');

			// defaults
			base.$window = base.$el.parent(); // mb-scroll
			base.$wrap = base.$window.parent() // mb-wrapper
				.css({ width : o.width }) // override css width
				.prepend('<a class="mb-scrollButtons mb-left"></a>')
				.append('<a class="mb-scrollButtons mb-right"></a><div class="mb-left-shadow"></div><div class="mb-right-shadow"></div>');
			base.$panels = base.$el.children().addClass('mb-panel');
			base.runTime = $('.mb-slider').index(base.$el) + 1; // Get index (run time) of this slider on the page
			base.regex = new RegExp('slider' + base.runTime + '=(\\d+)', 'i'); // hash tag regex

			base.initialized = false;
			base.currentlyMoving = false;
			base.curPanel = 1;

			// Set up click on left/right arrows
			base.$left = base.$wrap.find('.mb-left').click(function(){
				base.goBack();
				return false;
			});
			base.$right = base.$wrap.find('.mb-right').click(function(){
				base.goForward();
				return false;
			});

			// code to run to update MovingBoxes when the number of panels change
			base.update();
			$(window).load(function(){ base.update(false); }); // animate height after all images load

			// go to clicked panel
			base.$el.delegate('.mb-panel', 'click', function(){
				base.change( base.$panels.index($(this)) + base.adj );
			});

			// Activate moving box on click or when an internal link obtains focus
			base.$wrap.click(function(){
				base.active(addClass('group1'));
			});
			base.$panels.delegate('a', 'focus' ,function(){
				// focused link centered in moving box
				var loc = base.$panels.index($(this).closest('.mb-panel')) + 1;
				if (loc !== base.curPanel){ base.change( base.$panels.index($(this).closest('.mb-panel')) + 1, {}, false ); }
			});

			// Add keyboard navigation
			$(document).keyup(function(e){
				// ignore arrow/space keys if inside a form element
				if (e.target.tagName.match('TEXTAREA|INPUT|SELECT')) { return; }
				switch (e.which) {
					case 39: case 32: // right arrow & space
						if (base.$wrap.is('.mb-active-slider')){
							base.goForward();
						}
						break;
					case 37: // left arrow
						if (base.$wrap.is('.mb-active-slider')){
							base.goBack();
						}
						break;
				}
			});

			// Set up "Current" panel
			var startPanel = (o.hashTags) ?  base.getHash() || o.startPanel : o.startPanel;

			// Bind Events
			$.each('initialized initChange beforeAnimation completed'.split(' '), function(i,evt){
				if ($.isFunction(o[evt])){
					base.$el.bind(evt + '.movingBoxes', o[evt]);
				}
			});

			// animate to chosen start panel - starting from the first panel makes it look better
			setTimeout(function(){
				base.change(startPanel, function(){
					base.initialized = true;
					base.$el.trigger( 'initialized.movingBoxes', [ base, startPanel ] );
				});
			}, o.speed * 2 );

		};

		// update the panel, flag is used to prevent events from firing
		base.update = function(flag){
			var t;
			// Infinite loop
			base.$el.children('.cloned').remove();
			base.$panels = base.$el.children();
			base.adj = (o.wrap && base.$panels.length > 1) ? 0 : 1; // count adjustment for infinite panels

			if (o.wrap && base.$panels.length > 1) {
				base.$el.prepend( base.$panels.filter(':last').clone().removeAttr('id').addClass('cloned') );
				base.$el.append( base.$panels.filter(':first').clone().removeAttr('id').addClass('cloned') );
				base.$el.find('.cloned').each(function(){
					// disable all focusable elements in cloned panels to prevent shifting the panels by tabbing
					$(this).find('a,input,textarea,select,button,area').attr('disabled', 'disabled');
					$(this).find('[id]').removeAttr('id');
				});
			} 

			// Set up panes & content sizes; default: panelWidth = 50% of entire width
			base.$panels = base.$el.children()
				.addClass('mb-panel')
				.css({ width : o.width * o.panelWidth, margin: 0 })
				// inner wrap of each panel
				.each(function(){
					if ($(this).find('.mb-inside').length === 0) {
						$(this).wrapInner('<div class="mb-inside" />');
					}
				});
			base.totalPanels = base.$panels.length;
			base.totalPanels -= (o.wrap && base.totalPanels > 1) ? 2 : 0; // don't include cloned panels in total

			// save 'cur' numbers (current larger panel size), use stored sizes if they exist
			t = base.$panels.eq(base.curPanel - base.adj);
			base.curWidth = base.curWidth || t.outerWidth();

			// save 'reg' (reduced size) numbers
			base.regWidth = base.curWidth * o.reducedSize;

			// set image heights so base container height is correctly set
			base.$panels.css({ width: base.curWidth, fontSize: '1em' }); // make all panels big

			// save each panel height... script will resize container as needed
			// make sure current panel css is applied before measuring
			base.$panels.eq(base.curPanel - base.adj).addClass(o.currentPanel);
			base.heights = base.$panels.map(function(i,e){ return $(e).outerHeight(true); }).get();

			base.returnToNormal(base.curPanel, 0); // resize new panel, animation time
			base.growBigger(base.curPanel, 0, flag);
			base.updateArrows(base.curPanel);

			// make base container wide enough to contain all the panels
			base.$el.css({
				position : 'absolute',
				// add a bit more width to each box (100px should cover margin/padding, etc; then add 1/2 overall width in case only one panel exists
				width    : (base.curWidth + 100) * base.$panels.length + (o.width - base.curWidth) / 2,
				height   : Math.max.apply( this, base.heights ) + 10
			});
			base.$window.css({ height : (o.fixedHeight) ? Math.max.apply( this, base.heights ) : base.heights[base.curPanel - base.adj] });
			// add padding so scrollLeft = 0 centers the left-most panel (needed because scrollLeft cannot be < 0)
			base.$panels.eq(0).css({ 'margin-left' : (o.width - base.curWidth) / 2 });

			base.buildNav();

			base.change(base.curPanel, null, true); // initialize from first panel... then scroll to start panel

		};

		// Creates the numbered navigation links
		base.buildNav = function() {
			if (base.$nav) { base.$nav.remove(); }
			if (o.buildNav && base.totalPanels > 1) {
				base.$nav = $('<div class="mb-controls"><a class="mb-testing"></a></div>').appendTo(base.$wrap);
				var j, a = '',
				navFormat = $.isFunction(o.navFormatter),
				// need link in place to get CSS properties
				hiddenText = parseInt( base.$nav.find('.mb-testing').css('text-indent'), 10) < 0;
				base.$panels.filter(':not(.cloned)').each(function(i) {
					j = i + 1;
					a += '<a href="#" class="mb-panel' + j;
					// If a formatter function is present, use it
					if (navFormat) {
						var tmp = o.navFormatter(j, $(this));
						// Add formatting to title attribute if text is hidden
						a += (hiddenText) ? ' ' + o.tooltipClass +'" title="' + tmp : '';
						a += '">' + tmp + '</a> ';
					} else {
						a += '">' + j + '</a> ';
					}
				});
				base.$nav
					.html(a)
					.find('a').bind('click', function() {
						base.change( $(this).index() + 1 );
						return false;
					});
			}
		};

		// Resize panels to normal
		base.returnToNormal = function(num, time){
			var panels = base.$panels.not(':eq(' + (num - base.adj) + ')').removeClass(o.currentPanel);
			if (o.reducedSize === 1) {
				panels.css({ width: base.regWidth }); // excluding fontsize change to prevent video flicker
			} else {
				panels.animate({ width: base.regWidth, fontSize: o.reducedSize + 'em' }, (time === 0) ? 0 : o.speed);
			}
		};

		// Zoom in on selected panel
		base.growBigger = function(num, time, flag){
			var panels = base.$panels.eq(num - base.adj);
			if (o.reducedSize === 1) {
				panels.css({ width: base.curWidth }); // excluding fontsize change to prevent video flicker
				if (base.initialized) { base.completed(num, flag); }
			} else {
				panels.animate({ width: base.curWidth, fontSize: '1em' }, (time === 0) ? 0 : o.speed, function(){
					// completed event trigger
					// even though animation is not queued, trigger is here because it is the last animation to complete
					if (base.initialized) { base.completed(num, flag); }
				});
			}
		};

		base.completed = function(num, flag){
			// add current panel class after animating in case it has sizing parameters
			base.$panels.eq(num - base.adj).addClass(o.currentPanel);
			if (flag !== false) { base.$el.trigger( 'completed.movingBoxes', [ base, num ] ); }
		};

		// go forward/back
		base.goForward = function(){
			if (base.initialized) {
				base.change(base.curPanel + 1); 
			}
		};

		base.goBack = function(){
			if (base.initialized) {
				base.change(base.curPanel - 1);
			}
		};

		// Change view to display selected panel
		base.change = function(curPanel, callback, flag){
			if (base.totalPanels < 1) {
				if (typeof(callback) === 'function') { callback(base); }
				return;
			}
			var ani, leftValue, wrapped = false;

			// make sure it's a number and not a string
			curPanel = parseInt(curPanel, 10);

			if (base.initialized) {
				// make this moving box active
				base.active();
				// initChange event - has extra parameter with targeted panel (not cleaned)
				base.$el.trigger( 'initChange.movingBoxes', [ base, curPanel ] );
			}

			// Make infinite scrolling work
			if (o.wrap) {
				if (curPanel > base.totalPanels) {
					wrapped = true;
					curPanel = 1;
					base.returnToNormal(0, 0);
					base.growBigger(0, 0, false);
					leftValue = base.$panels.eq(0).position().left - (o.width - base.curWidth) / 2; // - ( base.curWidth - base.regWidth );
					base.$window.scrollLeft(leftValue);
				} else if (curPanel === 0) {
					wrapped = false;
					curPanel = base.totalPanels;
					base.growBigger(curPanel + 1, 0, false);
					leftValue = base.$panels.eq(curPanel + 1).position().left - (o.width - base.curWidth) / 2; // - ( base.curWidth - base.regWidth );
					base.$window.scrollLeft(leftValue);
				}
			}

			if ( curPanel < base.adj ) { curPanel = (o.wrap) ? base.totalPanels : 1; }
			if ( curPanel > base.totalPanels - base.adj ) { curPanel = (o.wrap) ? 1 : base.totalPanels; }

			// don't do anything if it's the same panel
			if (base.initialized && base.curPanel === curPanel && !flag) { return false; }

			// abort if panel is already animating
			// animation callback to clear this flag is not called when the slider doesn't move, so include base.initialized
			if (!base.currentlyMoving || !base.initialized) {
				base.currentlyMoving = true;

				// center panel in scroll window
				leftValue = base.$panels.eq(curPanel - base.adj).position().left - (o.width - base.curWidth) / 2;

				// when scrolling right, add the difference of the larger current panel width
				if (curPanel > base.curPanel || wrapped) { leftValue -= ( base.curWidth - base.regWidth ); }
				ani = (o.fixedHeight) ? { scrollLeft : leftValue } : { scrollLeft: leftValue, height: base.heights[curPanel - base.adj] };

				// before animation trigger
				if (base.initialized) { base.$el.trigger( 'beforeAnimation.movingBoxes', [ base, curPanel ] ); }
				// animate the panels
				base.$window.animate( ani,
					{
						queue    : false,
						duration : o.speed,
						easing   : o.easing,
						complete : function(){
							base.curPanel = curPanel;
							if (base.initialized) {
								base.$window.scrollTop(0); // Opera fix - otherwise, it moves the focus link to the middle of the viewport
							}
							base.currentlyMoving = false;
							if (typeof(callback) === 'function') { callback(base); }
						}
					}
				);

				base.returnToNormal(curPanel);
				base.growBigger(curPanel);
				if (!o.wrap) { base.updateArrows(curPanel); }
				if (o.hashTags && base.initialized) { base.setHash(curPanel); }

			}

			// Update navigation links
			if (o.buildNav && base.$nav) {
				base.$nav.find('a')
					.removeClass(o.currentPanel)
					.eq(curPanel - 1).addClass(o.currentPanel);
			}

		};

		base.updateArrows = function(cur){
			base.$left.toggleClass(o.disabled, cur === base.adj);
			base.$right.toggleClass(o.disabled, (cur === base.totalPanels || base.totalPanels === 0));
		};

		// get & set hash tags
		base.getHash = function(){
			var n = window.location.hash.match(base.regex);
			return (n===null) ? '' : parseInt(n[1],10);
		};

		base.setHash = function(n){
			var s = 'slider' + base.runTime + "=",
				h = window.location.hash;
			if ( typeof h !== 'undefined' ) {
				window.location.hash = (h.indexOf(s) > 0) ? h.replace(base.regex, s + n) : h + "&" + s + n;
			}
		};

		// Make moving box active (for keyboard navigation)
		base.active = function(el){
			$('.mb-active-slider').removeClass('mb-active-slider');
			base.$wrap.addClass('mb-active-slider');
		};

		// get: var currentPanel = $('.slider').data('movingBoxes').currentPanel();  // returns # of currently selected/enlarged panel
		// set: var currentPanel = $('.slider').data('movingBoxes').currentPanel(2, function(){ alert('done!'); }); // returns and scrolls to 2nd panel
		base.currentPanel = function(panel, callback){
			if (typeof(panel) !== 'undefined') {
				base.change(panel, callback); // parse in case someone sends a string
			}
			return base.curPanel;
		};

		// Run initializer
		base.init();
	};

	$.movingBoxes.defaultOptions = {
		// Appearance
		startPanel   : 1,         // start with this panel
		width        : 800,       // overall width of movingBoxes
		panelWidth   : 0.5,       // current panel width adjusted to 50% of overall width
		reducedSize  : 0.8,       // non-current panel size: 80% of panel size
		fixedHeight  : false,     // if true, slider height set to max panel height; if false, slider height will auto adjust.

		// Behaviour
		speed        : 500,       // animation time in milliseconds
		hashTags     : true,      // if true, hash tags are enabled
		wrap         : false,     // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
		buildNav     : false,     // if true, navigation links will be added
		navFormatter : null,      // function which returns the navigation text for each panel
		easing       : 'swing',   // anything other than "linear" or "swing" requires the easing plugin

		// Selectors & classes
		currentPanel : 'current', // current panel class
		tooltipClass : 'tooltip', // added to the navigation, but the title attribute is blank unless the link text-indent is negative
		disabled     : 'disabled',// class added to arrows that are disabled (left arrow when on first panel, right arrow on last panel)

		// Callbacks
		initialized     : null,   // callback when MovingBoxes has completed initialization
		initChange      : null,   // callback upon change panel initialization
		beforeAnimation : null,   // callback before any animation occurs
		completed       : null    // callback after animation completes
	};

	$.fn.movingBoxes = function(options, callback){
		var num, mb;
		return this.each(function(){
			mb = $(this).data('movingBoxes');
			// initialize the slider but prevent multiple initializations
			if ((typeof(options)).match('object|undefined')){
				if (mb) {
					mb.update();
				} else {
					(new $.movingBoxes(this, options));
				}
			} else if (/\d/.test(options) && !isNaN(options) && mb) {
				num = (typeof(options) === "number") ? options : parseInt($.trim(options),10); // accepts "  4  "
				// ignore out of bound panels
				if ( num >= 1 && num <= mb.totalPanels ) {
					mb.change(num, callback); // page #, autoplay, one time callback
				}
			}
		});
	};

	// Return the movingBoxes object
	$.fn.getMovingBoxes = function(){
		return this.data('movingBoxes');
	};

})(jQuery);

Sign In

Помогите прикрутить к слайдеру Colorbox

Recommended Posts

rus999

Link to comment

Share on other sites

Обсуждения

Forums

Important Information