gallery_code.html - oddcographics - Webapp geared towards hosting and displaying graphic novels.

Source path: svn/ trunk/ templates/ comics/ gallery_code.html

‹r11

r19

<script type="text/javascript" src="/site-media/jcarousel.galleria.js"></script>
<script type="text/javascript">
				
	//<![CDATA[
	var staMarker = 0;
	var endMarker = 5;
	var curMarker = 0;
	function onImageGalleria(image, caption, thumb){ // let's add some image effects for demonstration purposes
				
				// fade in the image & caption
				image.css('display','none').fadeIn(200);
				caption.css('display','none').fadeIn(200);
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(100,0.6);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next panel >>');
				
				$('#main_image').trigger('img_change');
				
				

			};
	function onThumbGalleria(thumb){ // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.6';
				
				// fade in the thumbnail when finished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.6); } // don't fade out if the parent is active
				)
			};
		
	
	$(document).ready(function(){
		
		$('.jcarousel-skin-tango').addClass('gallery_show'); // adds new class name to maintain degradability
		
		$('ul.gallery_show').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image, caption, thumb) {
				onImageGalleria(image, caption, thumb);
				},
			onThumb   : function(thumb) {
				onThumbGalleria(thumb);
				}
			});
		
		jQuery('#mycarousel').jcarousel({
        	scroll: 6,
	        initCallback: mycarousel_initCallback
	    });
	    
	    $.hotkeys.add('left', function(){$.galleria.prev();});
	    $.hotkeys.add('right', function(){$.galleria.next();});


	    $(function() { 
				//var slideshow = $("gallerytitle");
				
				var active = false;
				var gal = jQuery('#gallerytitle');
				gal.find('.start').css("cursor", "pointer").click(function() {
					if (!active) {
						active = !active;
						$.galleria.next();
						gal.everyTime('5s', 'slideshow', function() {
							$.galleria.next();
						});
					}
				});
				//}).end().find('.stop').css("cursor", "pointer").click(function() {
				gal.find('.stop').css("cursor", "pointer").click(function() {
					if (active) {
						active = !active;
						gal.stopTime('slideshow');
					}
				});
		});
	    
    });
	
	function processNewImage(){
			var _container = $('.newImage'); //supposed to be an li element
			
			// try to fetch an anchor
			var _a = $('.newImage').find('a').is('a') ? $('.newImage').find('a') : false;
			//alert(_a);
			// reference the original image as a variable and hide it
			var _img = $('.newImage').children('img').css('display','none');
			//alert(_img);
			// extract the original source
			var _src = _a ? _a.attr('href') : _img.attr('src');
			//alert(_src);
			// find a title
			//alert(_img.attr('title'));
			//alert(_img.attr('title').indexOf(':'));
			if (_img.attr('title').indexOf(':')==-1)
				{var _title = _a ? i + ":" + _a.attr('title') : i + ":" + _img.attr('title');}
			else
				{var _title = _img.attr('title');}
		
			// create loader image            
			var _loader = new Image();
			// check url and activate container if match
			//if (_o.history && (window.location.hash && window.location.hash.replace(/\#/,'') == _src)) {
			//	_container.siblings('.active').removeClass('active');
			//	_container.addClass('active');
			//}
			
			// begin loader
		
			$(_loader).load(function () {
				
				// try to bring the alt
				$(this).attr('alt',_img.attr('alt'));
				
				//-----------------------------------------------------------------
				// the image is loaded, let's create the thumbnail
				
				var _thumb = _a ? 
					_a.find('img').addClass('thumb noscale').css('display','none') :
					_img.clone(true).addClass('thumb').css('display','none');
				
				if (_a) { _a.replaceWith(_thumb); }
				
				if (!_thumb.hasClass('noscale')) { // scaled tumbnails!
					var w = Math.ceil( _img.width() / _img.height() * _container.height() );
					var h = Math.ceil( _img.height() / _img.width() * _container.width() );
					if (w < h) {
						_thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 });
					} else {
						_thumb.css({ width: 'auto', height: _container.height(), marginLeft: -(w-_container.width())/2 });
					}
				} else { // Center thumbnails.
					// a tiny timer fixed the width/height
					window.setTimeout(function() {
						_thumb.css({
							marginLeft: -( _thumb.width() - _container.width() )/2, 
							marginTop:  -( _thumb.height() - _container.height() )/2
						});
					}, 1);
				}
				
				// add the rel attribute
				_thumb.attr('rel',_src);
				
				// add the title attribute
				_thumb.attr('title',_title);
				
				// add the click functionality to the _thumb
				_thumb.click(function() {
					$.galleria.activate(_src);
				});
				
				// hover classes for IE6
				_thumb.hover(
					function() { $('.newImage').addClass('hover'); },
					function() { $('.newImage').removeClass('hover'); }
				);
				_container.hover(
					function() { _container.addClass('hover'); },
					function() { _container.removeClass('hover'); }
				);

				// prepend the thumbnail in the container
				_container.prepend(_thumb);
				
				// show the thumbnail
				_thumb.css('display','block');
				
				// call the onThumb function
				_o.onThumb(jQuery(_thumb));
				
				// check active class and activate image if match
				if (_container.hasClass('active')) {
					$.galleria.activate(_src);
					//_span.text(_title);
				}
				
				//-----------------------------------------------------------------
				
				// finally delete the original image
				_img.remove();
				
			}).error(function () {
				
				// Error handling
			    _container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>');
			
			}).attr('src', _src);
		};
			
    function mycarousel_initCallback(carousel) {
		jQuery('#main_image').bind('img_change',function() {
		    var num = parseInt((jQuery('.caption').text()).split(":",1)[0])-1;
			var diff = (num-staMarker)
			if (diff>=2){
				staMarker = staMarker+1;
				jQuery.get('/ajax/next-image/{{series_name}}/{{issue_name}}/'+endMarker+'/',  function(data){
					//$('#mycarousel').append(data);
					//alert(carousel.size());
					
					endMarker = endMarker+1;
					carousel.add(endMarker+1, data);
					carousel.size(carousel.size()+1);
					$('.jcarousel-item-'+(endMarker+1)).addClass('newImage');
					//$('.galleria_wrapper').remove();
					//$('.caption').remove();
					//$('ul.gallery_show').galleria({
					//	history   : true, // activates the history object for bookmarking, back-button etc.
					//	clickNext : true, // helper for making the image clickable
					//	insert    : '#main_image', // the containing selector for our main image
					//	onImage   : function(image, caption, thumb) {
					//		onImageGalleria(image, caption, thumb);
					//	},
					//	onThumb   : function(thumb) {
					//		onThumbGalleria(thumb);
					//	}
					//});
					processNewImage();
					$('.jcarousel-item-'+(endMarker+1)).removeClass('newImage');
					//alert(carousel.size());
					});};
			curMarker = num+1;
			
			carousel.scroll(num);
	        return false;
	    });
	};

//]]>
</script>

Show details Hide details

Change log

r15 by trinioler on May 18, 2008 Diff

update

Go to:

Project members, sign in to write a code review

Older revisions

r11 by trinioler on May 15, 2008 Diff

update

All revisions of this file

File info

Size: 8087 bytes, 249 lines

View raw file