[Resolvido] Opacity SmoothGallery

whoopic · Dezembro 28, 2011

Boas pessoal.

Andei a alterar o css da smoothgallery e parte do que pretendia consigo alcançar: escolha de álbums à esquerda e slideshow à direita.

O que não consigo resolver - porque não percebo de JS - era fazer com que essa dita selecção de álbuns não desaparecesse quando é escolhido o álbum. Penso que terá a ver com uma função relacionada com opacidade mas no pouco que tentei alterar a galeria deixou logo de funcionar.

ALguém dá uma ajudinha?

Obrigado desde já.

----------------------------------------

LINK SMOOTHGALLERY

----------------------------------------

PHP

<?

$sTemplate = <<<XML
<div class="imageElement">
   <h3>{title}</h3>
   <p>{description}</p>
   <a href="#" title="open image" class="open"></a>
   <img src="{fileurl}" class="full" />
   <img src="{fileurl}" class="thumbnail" />
</div>
XML;

$aUnits = array(
   'Album #1' => array(
       'image 1' => array('Image 1 description', 'pic1.jpg'),
       'image 2' => array('Image 2 description', 'pic2.jpg'),
       'image 3' => array('Image 3 description', 'pic3.jpg'),
       'image 4' => array('Image 4 description', 'pic4.jpg'),
       'image 5' => array('Image 5 description', 'pic5.jpg'),
       'image 6' => array('Image 6 description', 'pic6.jpg')
   ),
   'Album #2' => array(
       'image 7' => array('Image 7 description', 'pic7.jpg'),
       'image 8' => array('Image 8 description', 'pic8.jpg'),
       'image 9' => array('Image 9 description', 'pic9.jpg'),
       'image 10' => array('Image 10 description', 'pic10.jpg'),
       'image 11' => array('Image 11 description', 'pic11.jpg'),
       'image 12' => array('Image 12 description', 'pic12.jpg')
   ),
   'Album #3' => array(
       'image 13' => array('Image 13 description', 'pic13.jpg'),
       'image 14' => array('Image 14 description', 'pic14.jpg'),
       'image 15' => array('Image 15 description', 'pic15.jpg'),
       'image 16' => array('Image 16 description', 'pic16.jpg'),
       'image 17' => array('Image 17 description', 'pic17.jpg'),
       'image 18' => array('Image 18 description', 'pic18.jpg')
   )
);

$sGalleryObjects = '';
$sFolder = 'data_images/';
foreach ($aUnits as $sAlbumTitle => $aAlbums) {
   $sGalleryObjects .= '<div id="'.$sAlbumTitle.'" class="galleryElement"><h2>'.$sAlbumTitle.'</h2>';
   foreach ($aAlbums as $sTitle => $aUnitInfo) {
       list($sDescription, $sFileName) = $aUnitInfo;
       $sFilePath = $sFolder . $sFileName;
       $sGalleryObjects .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{description}' => $sDescription));
   }
   $sGalleryObjects .= '</div>';
}

echo <<<EOF
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" />
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>
<script src="js/jd.gallery.set.js" type="text/javascript"></script>

<div class="example">
   <h3><a href="#">SmoothGallery examples. First - single gallery, second - multiple galleries</a></h3>
   <div>
       <div id="multiple_galleries">
           {$sGalleryObjects}
       </div>

       <script type="text/javascript">
           function startGallery() {
               var myGal2 = new gallerySet($('multiple_galleries'), {
                   timed: true,
                   delay: 5000,
                   embedLinks: false
               });
           }
           window.addEvent('domready',startGallery);
       </script>
   </div>
</div>
<hr style="clear:both;" />
<h4><a href="http://www.script-tutorials.com/creating-photo-albums-using-smoothgallery/">back to original article page</a></h4>
EOF;

?>

---------------------------------------

JS

/*
   This file is part of JonDesign's SmoothGallery v2.1beta1.

   JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 3 of the License, or
   (at your option) any later version.

   JonDesign's SmoothGallery is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with JonDesign's SmoothGallery; if not, write to the Free Software
   Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

   Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
   Contributed code by:
   - Christian Ehret (bugfix)
- Nitrix (bugfix)
- Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
- Archie Cowan for helping me find a bugfix on carousel inner width problem.
- Tomocchino from #mootools for the preloader class
Many thanks to:
- The mootools team for the great mootools lib, and it's help and support throughout the project.
- Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.
*/

/* some quirks to circumvent broken stuff in mt1.2 */
function isBody(element){
return (/^(?:body|html)$/i).test(element.tagName);
};
Element.implement({
getPosition: function(relative){
	if (isBody(this)) return {x: 0, y: 0};
	var el = this, position = {x: 0, y: 0};
	while (el){
		position.x += el.offsetLeft;
		position.y += el.offsetTop;
		el = el.offsetParent;
	}
	var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};
	return {x: position.x - rpos.x, y: position.y - rpos.y};
}
});

// declaring the class
var gallery = {
Implements: [Events, Options],
options: {
	showArrows: true,
	showCarousel: true,
	showInfopane: true,
	embedLinks: true,
	fadeDuration: 500,
	timed: false,
	delay: 9000,
	preloader: true,
	preloaderImage: true,
	preloaderErrorImage: true,
	/* Data retrieval */
	manualData: [],
	populateFrom: false,
	populateData: true,
	destroyAfterPopulate: true,
	elementSelector: "div.imageElement",
	titleSelector: "h3",
	subtitleSelector: "p",
	linkSelector: "a.open",
	imageSelector: "img.full",
	thumbnailSelector: "img.thumbnail",
	defaultTransition: "fade",
	/* InfoPane options */
	slideInfoZoneOpacity: 0.7,
	slideInfoZoneSlide: true,
	/* Carousel options */
	carouselMinimizedOpacity: 0.4,
	carouselMinimizedHeight: 20,
	carouselMaximizedOpacity: 0.9,
	thumbHeight: 75,
	thumbWidth: 100,
	thumbSpacing: 10,
	thumbIdleOpacity: 0.2,
	textShowCarousel: 'Pictures',
	showCarouselLabel: true,
	thumbCloseCarousel: true,
	useThumbGenerator: false,
	thumbGenerator: 'resizer.php',
	useExternalCarousel: false,
	carouselElement: false,
	carouselHorizontal: true,
	activateCarouselScroller: true,
	carouselPreloader: true,
	textPreloadingCarousel: 'Loading...',
	/* CSS Classes */
	baseClass: 'jdGallery',
	withArrowsClass: 'withArrows',
	/* Plugins: HistoryManager */
	useHistoryManager: false,
	customHistoryKey: false,
	/* Plugins: ReMooz */
	useReMooz: false
},
initialize: function(element, options) {
	this.setOptions(options);
	this.fireEvent('onInit');
	this.currentIter = 0;
	this.lastIter = 0;
	this.maxIter = 0;
	this.galleryElement = element;
	this.galleryData = this.options.manualData;
	this.galleryInit = 1;
	this.galleryElements = Array();
	this.thumbnailElements = Array();
	this.galleryElement.addClass(this.options.baseClass);

	if (this.options.useReMooz&&(this.options.defaultTransition=="fade"))
		this.options.defaultTransition="crossfade";

	this.populateFrom = element;
	if (this.options.populateFrom)
		this.populateFrom = this.options.populateFrom;		
	if (this.options.populateData)
		this.populateData();
	element.style.display="block";

	if (this.options.useHistoryManager)
		this.initHistory();

	if ((this.options.embedLinks)|(this.options.useReMooz))
	{
		this.currentLink = new Element('a').addClass('open').setProperties({
			href: '#',
			title: ''
		}).injectInside(element);
		if ((!this.options.showArrows) && (!this.options.showCarousel))
			this.galleryElement = element = this.currentLink;
		else
			this.currentLink.setStyle('display', 'none');
	}

	this.constructElements();
	if ((this.galleryData.length>1)&&(this.options.showArrows))
	{
		var leftArrow = new Element('a').addClass('left').addEvent(
			'click',
			this.prevItem.bind(this)
		).injectInside(element);
		var rightArrow = new Element('a').addClass('right').addEvent(
			'click',
			this.nextItem.bind(this)
		).injectInside(element);
		this.galleryElement.addClass(this.options.withArrowsClass);
	}
	this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
	if (this.options.showInfopane) this.initInfoSlideshow();
	if (this.options.showCarousel) this.initCarousel();
	this.doSlideShow(1);
},
populateData: function() {
	currentArrayPlace = this.galleryData.length;
	options = this.options;
	var data = $A(this.galleryData);
	data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
	this.galleryData = data;
	this.fireEvent('onPopulated');
},
populateGallery: function(element, startNumber) {
	var data = [];
	options = this.options;
	currentArrayPlace = startNumber;
	element.getElements(options.elementSelector).each(function(el) {
		elementDict = $H({
			image: el.getElement(options.imageSelector).getProperty('src'),
			number: currentArrayPlace,
			transition: this.options.defaultTransition
		});
		if ((options.showInfopane) | (options.showCarousel))
			elementDict.extend({
				title: el.getElement(options.titleSelector).innerHTML,
				description: el.getElement(options.subtitleSelector).innerHTML
			});
		if ((options.embedLinks) | (options.useReMooz))
			elementDict.extend({
				link: el.getElement(options.linkSelector).href||false,
				linkTitle: el.getElement(options.linkSelector).title||false,
				linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
			});
		if ((!options.useThumbGenerator) && (options.showCarousel))
			elementDict.extend({
				thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
			});
		else if (options.useThumbGenerator)
			elementDict.extend({
				thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
			});

		data.extend([elementDict]);
		currentArrayPlace++;
		if (this.options.destroyAfterPopulate)
			el.dispose();
	});
	return data;
},
constructElements: function() {
	el = this.galleryElement;
	if (this.options.embedLinks && (!this.options.showArrows))
		el = this.currentLink;
	this.maxIter = this.galleryData.length;
	var currentImg;
	for(i=0;i<this.galleryData.length;i++)
	{
		var currentImg = new Fx.Morph(
			new Element('div').addClass('slideElement').setStyles({
				'position':'absolute',
				'left':'0px',
				'right':'0px',
				'margin':'0px',
				'padding':'0px',
				'backgroundPosition':"center center",
				'opacity':'0'
			}).injectInside(el),
			{duration: this.options.fadeDuration}
		);
		if (this.options.preloader)
		{
			currentImg.source = this.galleryData[i].image;
			currentImg.loaded = false;
			currentImg.load = function(imageStyle, i) {
				if (!imageStyle.loaded)	{
					this.galleryData[i].imgloader = new Asset.image(imageStyle.source, {
	                            'onload'  : function(img, i){
												img.element.setStyle(
												'backgroundImage',
												"url('" + img.source + "')")
												img.loaded = true;
												img.width = this.galleryData[i].imgloader.width;
												img.height = this.galleryData[i].imgloader.height;
											}.pass([imageStyle, i], this)
					});
				}
			}.pass([currentImg, i], this);
		} else {
			currentImg.element.setStyle('backgroundImage',
								"url('" + this.galleryData[i].image + "')");
		}
		this.galleryElements[parseInt(i)] = currentImg;
	}
},
destroySlideShow: function(element) {
	var myClassName = element.className;
	var newElement = new Element('div').addClass('myClassName');
	element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
	this.fireEvent('onStart');
	this.loadingElement.style.display = "none";
	this.lastIter = this.maxIter - 1;
	this.currentIter = 0;
	this.galleryInit = 0;
	this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
	if (this.options.showInfopane)
		this.showInfoSlideShow.delay(1000, this);
	if (this.options.useReMooz)
		this.makeReMooz.delay(1000, this);
	var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
	if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))
		this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
	this.prepareTimer();
	if (this.options.embedLinks)
		this.makeLink(this.currentIter);
},
nextItem: function() {
	this.fireEvent('onNextCalled');
	this.nextIter = this.currentIter+1;
	if (this.nextIter >= this.maxIter)
		this.nextIter = 0;
	this.galleryInit = 0;
	this.goTo(this.nextIter);
},
prevItem: function() {
	this.fireEvent('onPreviousCalled');
	this.nextIter = this.currentIter-1;
	if (this.nextIter <= -1)
		this.nextIter = this.maxIter - 1;
	this.galleryInit = 0;
	this.goTo(this.nextIter);
},
goTo: function(num) {
	this.clearTimer();
	if(this.options.preloader)
	{
		this.galleryElements[num].load();
		if (num==0)
			this.galleryElements[this.maxIter - 1].load();
		else
			this.galleryElements[num - 1].load();
		if (num==(this.maxIter - 1))
			this.galleryElements[0].load();
		else
			this.galleryElements[num + 1].load();

	}
	if (this.options.embedLinks)
		this.clearLink();
	if (this.options.showInfopane)
	{
		this.slideInfoZone.clearChain();
		this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
	} else
		this.currentChangeDelay = this.changeItem.delay(500, this, num);
	if (this.options.embedLinks)
		this.makeLink(num);
	this.prepareTimer();
	/*if (this.options.showCarousel)
		this.clearThumbnailsHighlights();*/
},
changeItem: function(num) {
	this.fireEvent('onStartChanging');
	this.galleryInit = 0;
	if (this.currentIter != num)
	{
		for(i=0;i<this.maxIter;i++)
		{
			if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
		}
		gallery.Transitions[this.galleryData[num].transition].pass([
			this.galleryElements[this.currentIter],
			this.galleryElements[num],
			this.currentIter,
			num], this)();
		this.currentIter = num;
		if (this.options.useReMooz)
			this.makeReMooz();
	}
	var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
	if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))
		this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
	this.doSlideShow.bind(this)();
	this.fireEvent('onChanged');
},
clearTimer: function() {
	if (this.options.timed)
		$clear(this.timer);
},
prepareTimer: function() {
	if (this.options.timed)
		this.timer = this.nextItem.delay(this.options.delay, this);
},
doSlideShow: function(position) {
	if (this.galleryInit == 1)
	{
		imgPreloader = new Image();
		imgPreloader.onload=function(){
			this.startSlideShow.delay(10, this);
		}.bind(this);
		imgPreloader.src = this.galleryData[0].image;
		if(this.options.preloader)
			this.galleryElements[0].load();
	} else {
		if (this.options.showInfopane)
		{
			if (this.options.showInfopane)
			{
				this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
			} else
				if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
					this.centerCarouselOn(position);
		}
	}
},
createCarousel: function() {
	var carouselElement;
	if (!this.options.useExternalCarousel)
	{
		var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
		this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});
		this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
		this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
		this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
			title: this.options.textShowCarousel
		}).injectInside(carouselContainerElement);
		if(this.options.carouselPreloader)
			this.carouselBtn.set('html', this.options.textPreloadingCarousel);
		else
			this.carouselBtn.set('html', this.options.textShowCarousel);
		this.carouselBtn.addEvent(
			'click',
			function () {
				this.carouselContainer.cancel();
				this.toggleCarousel();
			}.bind(this)
		);
		this.carouselActive = false;

		carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
		this.carousel = new Fx.Morph(carouselElement);
	} else {
		carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
	}
	this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});
	this.carouselElement.normalHeight = carouselElement.offsetHeight;
	if (this.options.showCarouselLabel)
		this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
	carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
	this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});
	this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
	this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
	if (this.options.activateCarouselScroller)
	{
		this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
			area: 100,
			velocity: 0.2
		})

		this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
			duration: 400,
			onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
			onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
		});
	}
},
fillCarousel: function() {
	this.constructThumbnails();
	this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
	if (this.options.carouselHorizontal)
		this.carouselInner.style.width = this.carouselInner.normalWidth;
},
initCarousel: function () {
	this.createCarousel();
	this.fillCarousel();
	if (this.options.carouselPreloader)
		this.preloadThumbnails();
},
flushCarousel: function() {
	this.thumbnailElements.each(function(myFx) {
		myFx.element.dispose();
		myFx = myFx.element = null;
	});
	this.thumbnailElements = [];
},
toggleCarousel: function() {
	if (this.carouselActive)
		this.hideCarousel();
	else
		this.showCarousel();
},
showCarousel: function () {
	this.fireEvent('onShowCarousel');
	this.carouselContainer.start({
		'opacity': this.options.carouselMaximizedOpacity,
		'top': 0
	}).chain(function() {
		this.carouselActive = true;
		this.carouselWrapper.scroller.start();
		this.fireEvent('onCarouselShown');
		this.carouselContainer.options.onComplete = null;
	}.bind(this));
},
hideCarousel: function () {
	this.fireEvent('onHideCarousel');
	var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
	this.carouselContainer.start({
		'opacity': this.options.carouselMinimizedOpacity,
		'top': targetTop
	}).chain(function() {
		this.carouselActive = false;
		this.carouselWrapper.scroller.stop();
		this.fireEvent('onCarouselHidden');
		this.carouselContainer.options.onComplete = null;
	}.bind(this));
},
constructThumbnails: function () {
	element = this.carouselInner;
	for(i=0;i<this.galleryData.length;i++)
	{
		var currentImg = new Fx.Morph(new Element ('div').addClass("thumbnail").setStyles({
				backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
				backgroundPosition: "center center",
				backgroundRepeat: 'no-repeat',
				marginLeft: this.options.thumbSpacing + "px",
				width: this.options.thumbWidth + "px",
				height: this.options.thumbHeight + "px"
			}).injectInside(element), {duration: 200}).start({
				'opacity': this.options.thumbIdleOpacity
			});
		currentImg.element.addEvents({
			'mouseover': function (myself) {
				myself.cancel();
				myself.start({'opacity': 0.99});
				if (this.options.showCarouselLabel)
					$(this.carouselLabel).set('html', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
			}.pass(currentImg, this),
			'mouseout': function (myself) {
				myself.cancel();
				myself.start({'opacity': this.options.thumbIdleOpacity});
			}.pass(currentImg, this),
			'click': function (myself) {
				this.goTo(myself.relatedImage.number);
				if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))
					this.hideCarousel();
			}.pass(currentImg, this)
		});

		currentImg.relatedImage = this.galleryData[i];
		this.thumbnailElements[parseInt(i)] = currentImg;
	}
},
log: function(value) {
	if(console.log)
		console.log(value);
},
preloadThumbnails: function() {
	var thumbnails = [];
	for(i=0;i<this.galleryData.length;i++)
	{
		thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;
	}
	this.thumbnailPreloader = new Preloader();
	if (!this.options.useExternalCarousel)
		this.thumbnailPreloader.addEvent('onComplete', function() {
			var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
			this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
		}.bind(this));
	this.thumbnailPreloader.load(thumbnails);
},
clearThumbnailsHighlights: function()
{
	for(i=0;i<this.galleryData.length;i++)
	{
		this.thumbnailElements[i].cancel();
		this.thumbnailElements[i].start(0.2);
	}
},
changeThumbnailsSize: function(width, height)
{
	for(i=0;i<this.galleryData.length;i++)
	{
		this.thumbnailElements[i].cancel();
		this.thumbnailElements[i].element.setStyles({
			'width': width + "px",
			'height': height + "px"
		});
	}
},
centerCarouselOn: function(num) {
	if (!this.carouselWallMode)
	{
		var carouselElement = this.thumbnailElements[num];
		var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
		var carouselWidth = this.carouselWrapper.element.offsetWidth;
		var carouselInnerWidth = this.carouselInner.offsetWidth;
		var diffWidth = carouselWidth / 2;
		var scrollPos = position-diffWidth;
		this.carouselWrapper.elementScroller.start(scrollPos,0);
	}
},
initInfoSlideshow: function() {
	/*if (this.slideInfoZone.element)
		this.slideInfoZone.element.remove();*/
	this.slideInfoZone = new Fx.Morph(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
	var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
	var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
	this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
	this.slideInfoZone.element.setStyle('opacity',0);
},
changeInfoSlideShow: function()
{
	this.hideInfoSlideShow.delay(10, this);
	this.showInfoSlideShow.delay(500, this);
},
showInfoSlideShow: function() {
	this.fireEvent('onShowInfopane');
	this.slideInfoZone.cancel();
	element = this.slideInfoZone.element;
	element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
	element.getElement('p').set('html', this.galleryData[this.currentIter].description);
	if(this.options.slideInfoZoneSlide)
		this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
	else
		this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
	if (this.options.showCarousel)
		this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
	return this.slideInfoZone;
},
hideInfoSlideShow: function() {
	this.fireEvent('onHideInfopane');
	this.slideInfoZone.cancel();
	if(this.options.slideInfoZoneSlide)
		this.slideInfoZone.start({'opacity': 0, 'height': 0});
	else
		this.slideInfoZone.start({'opacity': 0});
	return this.slideInfoZone;
},
makeLink: function(num) {
	this.currentLink.setProperties({
		href: this.galleryData[num].link,
		title: this.galleryData[num].linkTitle
	})
	if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
		this.currentLink.setStyle('display', 'block');
},
clearLink: function() {
	this.currentLink.setProperties({href: '', title: ''});
	if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
		this.currentLink.setStyle('display', 'none');
},
makeReMooz: function() {
	this.currentLink.setProperties({
		href: '#'
	});
	this.currentLink.setStyles({
		'display': 'block'
	});

	this.galleryElements[this.currentIter].element.set('title', this.galleryData[this.currentIter].title + ' :: ' + this.galleryData[this.currentIter].description);
	this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {
		link: this.galleryData[this.currentIter].link,
		shadow: false,
		dragging: false,
		addClick: false,
		resizeOpacity: 1
	});
	var img = this.galleryElements[this.currentIter];
	var coords = img.element.getCoordinates();
	delete coords.right;
	delete coords.bottom;

	widthDiff = coords.width - img.width;
	heightDiff = coords.height - img.height;

	coords.width = img.width;
	coords.height = img.height;

	coords.left += Math.ceil(widthDiff/2)+1;
	coords.top += Math.ceil(heightDiff/2)+1;

	this.ReMooz.getOriginCoordinates = function(coords) {
		return coords;
	}.bind(this, coords);
	this.currentLink.onclick = function () {
		this.ReMooz.open.bind(this.ReMooz)();
		return false;
	}.bind(this);
},
/* To change the gallery data, those two functions : */
flushGallery: function() {
	this.galleryElements.each(function(myFx) {
		myFx.element.dispose();
		myFx = myFx.element = null;
	});
	this.galleryElements = [];
},
changeData: function(data) {
	this.galleryData = data;
	this.clearTimer();
	this.flushGallery();
	if (this.options.showCarousel) this.flushCarousel();
	this.constructElements();
	if (this.options.showCarousel) this.fillCarousel();
	if (this.options.showInfopane) this.hideInfoSlideShow();
	this.galleryInit=1;
	this.lastIter=0;
	this.currentIter=0;
	this.doSlideShow(1);
},
/* Plugins: HistoryManager */
initHistory: function() {
	this.fireEvent('onHistoryInit');
	this.historyKey = this.galleryElement.id + '-picture';
	if (this.options.customHistoryKey)
		this.historyKey = this.options.customHistoryKey;

	this.history = new History.Route({
		defaults: [1],
		pattern: this.historyKey + '\\((\\d+)\\)',
		generate: function(values) {
			return [this.historyKey, '(', values[0], ')'].join('')
		}.bind(this),
		onMatch: function(values, defaults) {
			if (parseInt(values[0])-1 < this.maxIter)
				this.goTo(parseInt(values[0])-1);
		}.bind(this)
	});
	this.addEvent('onChanged', function(){
		this.history.setValue(0, this.currentIter+1);
		this.history.defaults=[this.currentIter+1];
	}.bind(this));
	this.fireEvent('onHistoryInited');
}
};
gallery = new Class(gallery);

gallery.Transitions = new Hash ({
fade: function(oldFx, newFx, oldPos, newPos){
	oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
	oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
	if (newPos > oldPos) newFx.start({opacity: 1});
	else
	{
		newFx.set({opacity: 1});
		oldFx.start({opacity: 0});
	}
},
crossfade: function(oldFx, newFx, oldPos, newPos){
	oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
	oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
	newFx.start({opacity: 1});
	oldFx.start({opacity: 0});
},
fadebg: function(oldFx, newFx, oldPos, newPos){
	oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
	oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
	oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
}
});

/* All code copyright 2007 Jonathan Schemoul */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var Preloader = new Class({

 Implements: [Events, Options],

 options: {
   root        : '',
   period      : 100
 },

 initialize: function(options){
   this.setOptions(options);
 },

 load: function(sources) {
   this.index = 0;
   this.images = [];
   this.sources = this.temps = sources;
   this.total = this. sources.length;

   this.fireEvent('onStart', [this.index, this.total]);
   this.timer = this.progress.periodical(this.options.period, this);

   this.sources.each(function(source, index){
     this.images[index] = new Asset.image(this.options.root + source, {
       'onload'  : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
       'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
       'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
     });
   }, this);
 },

 progress: function() {
   this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
   if(this.index >= this.total) this.complete();
 },

 complete: function(){
   $clear(this.timer);
   this.fireEvent('onComplete', [this.images]);
 },

 cancel: function(){
   $clear(this.timer);
 }

});

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

function formatString() {
var num = arguments.length;
var oStr = arguments[0];
for (var i = 1; i < num; i++) {
	var pattern = "\\{" + (i-1) + "\\}"; 
	var re = new RegExp(pattern, "g");
	oStr = oStr.replace(re, arguments[i]);
}
return oStr; 
}

whoopic · Dezembro 28, 2011

EXEMPLO

http://www.script-tutorials.com/demos/52/index-2.php

whoopic · Dezembro 29, 2011

OUTRO FICHEIRO JS

/*
   This file is part of JonDesign's SmoothGallery v2.1beta1.

   JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 3 of the License, or
   (at your option) any later version.

   JonDesign's SmoothGallery is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with JonDesign's SmoothGallery; if not, write to the Free Software
   Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

   Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
*/

var gallerySet = new Class({
Extends: gallery,
initialize: function(element, options) {
	this.setOptions({
		manualSetData: [],
		gallerySelector: "div.galleryElement",
		galleryTitleSelector: "h2",
		textGallerySelector: 'Galleries',
		textShowGallerySelector: 'Other Galleries',
		textGalleryInfo: '{0} pictures',
		startWithSelector: true,
		/* Changing default options */
		textShowCarousel: '{0}/{1} Pictures',
		carouselPreloader: false
	});
	this.setOptions(options);
	this.gallerySet = this.options.manualSetData;
	this.addEvent('onPopulated', this.createGallerySelectorTab.bind(this));
	this.addEvent('onPopulated', this.createGallerySelector.bind(this));
	this.startWithSelectorFn = this.toggleGallerySelector.pass(true, this);
	if (this.options.startWithSelector)
		this.addEvent('onGallerySelectorCreated', this.startWithSelectorFn);
	this.parent(element, this.options);
},
populateData: function() {
	options = this.options;
	var data = $A(this.gallerySet);
	this.populateFrom.getElements(options.gallerySelector).each(function (galEl) {
		currentGalArrayPlace = 0;
		galleryDict = {
			title: galEl.getElement(options.galleryTitleSelector).innerHTML,
			elements: []
		}
		galleryDict.elements.extend(this.populateGallery(galEl, 0));
		data.extend([galleryDict]);
		if (this.options.destroyAfterPopulate)
			galEl.dispose();
	}, this);
	this.gallerySet = data;
	this.galleryData = data[0].elements;
	this.currentGallery = 0;
	this.fireEvent('onPopulated');
},
changeGallery: function(number)
{
	if (number!=this.currentGallery)
	{
		this.changeData(this.gallerySet[number].elements);
		this.maxIter = this.gallerySet[number].elements.length;
		this.currentGallery = number;
		this.gallerySelectorBtn.set('html', this.gallerySet[number].title);
		this.fireEvent('onGalleryChanged');
	}
	this.toggleGallerySelector(false);
},
createGallerySelectorTab: function() {
	this.gallerySelectorBtn = new Element('a').addClass('gallerySelectorBtn').setProperties({
		title: this.options.textShowGallerySelector
	}).set('html', this.options.textShowGallerySelector).addEvent(
		'click',
		function(){ this.toggleGallerySelector(true); }.bind(this)
	).injectInside(this.galleryElement);
	this.addEvent('onShowCarousel', function(){this.gallerySelectorBtn.setStyle('zIndex', 10)}.bind(this));
	this.addEvent('onCarouselHidden', function(){this.gallerySelectorBtn.setStyle('zIndex', 15)}.bind(this));
},
createGallerySelector: function() {
	this.gallerySelector = new Fx.Morph(
		new Element('div').addClass(
			'gallerySelector'
		).injectInside(
			this.galleryElement
		).setStyles({
			'display': 'none',
			'opacity': '0'
		})
	);
	this.gallerySelectorTitle = 
		new Element('h2').set('html', 
			this.options.textGallerySelector
		).injectInside(this.gallerySelector.element);
	var gallerySelectorHeight = this.galleryElement.offsetHeight - 50 - 10 - 2;
	this.gallerySelectorWrapper = new Fx.Morph(
		new Element('div').addClass(
			'gallerySelectorWrapper'
		).setStyle(
			'height',
			gallerySelectorHeight + "px"
		).injectInside(this.gallerySelector.element)
	);
	this.gallerySelectorInner =	new Element('div').addClass('gallerySelectorInner').injectInside(this.gallerySelectorWrapper.element);
	this.gallerySelectorWrapper.scroller = new Scroller(this.gallerySelectorWrapper.element, {
		area: 100,
		velocity: 0.3
	}).start();
	this.createGalleryButtons();
	this.fireEvent('onGallerySelectorCreated');
},
createGalleryButtons: function () {
	var galleryButtonWidth =
		((this.galleryElement.offsetWidth - 30) / 2) - 14;
	this.gallerySet.each(function(galleryItem, index){
		var button = new Element('div').addClass('galleryButton').injectInside(
			this.gallerySelectorInner
		).addEvents({
			'mouseover': function(myself){
				myself.button.addClass('hover');
			}.pass(galleryItem, this),
			'mouseout': function(myself){
				myself.button.removeClass('hover');
			}.pass(galleryItem, this),
			'click': function(myself, number){
				this.changeGallery.pass(number,this)();
			}.pass([galleryItem, index], this)
		}).setStyle('width', galleryButtonWidth);
		galleryItem.button = button;
		var thumbnail = "";
		if (this.options.showCarousel)
			thumbnail = galleryItem.elements[0].thumbnail;
		else
			thumbnail = galleryItem.elements[0].image;
		new Element('div').addClass('preview').setStyle(
			'backgroundImage',
			"url('" + thumbnail + "')"
		).injectInside(button);
		new Element('h3').set('html', galleryItem.title).injectInside(button);
		new Element('p').addClass('info').set('html', formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button);
	}, this);
	new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both');
},
toggleGallerySelector: function(state) {
	if (state)
		this.gallerySelector.start({'opacity' : 1}).element.setStyle('display','block');
	else
		this.gallerySelector.start({'opacity' : 0});
},
initHistory: function() {
	this.fireEvent('onHistoryInit');
	this.historyKey = this.galleryElement.id + '-gallery';
	if (this.options.customHistoryKey)
		this.historyKey = this.options.customHistoryKey();
	this.history = new History.Route({
		defaults: [1,1],
		pattern: this.historyKey + '\\((\\d+)\\)-picture\\((\\d+)\\)',
		generate: function(values) {
			return [this.historyKey, '(', values[0], ')', '-picture','(', values[1], ')'].join('');
		}.bind(this),
		onMatch: function(values, defaults) {
			this.changeGallery.pass(parseInt(values[0]) - 1, this).delay(10);
			if(this.gallerySelector)
				this.toggleGallerySelector.pass(false, this).delay(500);
			this.goTo.pass(parseInt(values[1]) - 1, this).delay(100);
		}.bind(this)
	});
	updateHistory = function(){
		this.history.setValues([this.currentGallery + 1, this.currentIter + 1]);
		this.history.defaults=[this.currentGallery + 1, this.currentIter + 1];
	}.bind(this);		

	this.addEvent('onChanged', updateHistory);
	this.addEvent('onGalleryChanged', updateHistory);
	this.fireEvent('onHistoryInited');
}
});

whoopic · Dezembro 29, 2011

Uff...

Descobri a questão da opacidade.

Segundo ficheiro JS, alterar:

	toggleGallerySelector: function(state) {
	if (state)
		this.gallerySelector.start({'opacity' : 1}).element.setStyle('display','block');
	else
		this.gallerySelector.start({'opacity' : 0});

	toggleGallerySelector: function(state) {
	if (state)
		this.gallerySelector.start({'opacity' : 1}).element.setStyle('display','block');
	else
		this.gallerySelector.start({'opacity' : 1});

Não será a maneira mais limpa de o fazer, mas por agora vai remediando.

Pode ser que dê jeito a alguém

Entrar

Arquivado

[Resolvido] Opacity SmoothGallery

Recommended Posts

whoopic 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

whoopic 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

whoopic 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

whoopic 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante