Kirjautuminen

Haku

Tehtävät

Keskustelu: Ohjelmointikysymykset: JavaScript: Tarvitsen apua Javascriptissä!

makkke_ [07.03.2012 14:45:15]

#

Eli haluaisin JS kuvakarusellini pyörimään nuolinäppäimillä (vasen ja oikea) ja alla näkyy kuvakarusellin koodi ja shortcut.add (pikanäppäin koodi nuolinäppäimille vasen ja oikea). Shortcut.add functioksi pitäisi saada karusellin pyöräytys eli joko #left-but tai #right-but functio joka kääntää karuselliä aina seuraavaan kuvaan joko vasemmalle tai oikealle.

$(document).ready(function(){

	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(
		{
			xPos: 380,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});

shortcut.add("left", function() {
        $("#left-but");
    });

    shortcut.add("right", function() {
        $("#right-but");

    });

Metabolix [07.03.2012 16:41:31]

#

Miten olisi esimerkiksi $("left-but").click()?

makkke_ [08.03.2012 09:42:02]

#

En osaa oikeestaan yhtään javascriptiä mut päättelin et toi .click() tarkottaa jotain klikkausta vaativaa? Mut haen nyt sitä et sais nuoli näppäimillä liikulteltu vasemmalle tai oikealle tota kuva karuselliä. Luulisin et sen sais noilla #left-but ja #right-but parametreillä toteutettua ja onha tos toi nuolinäppäintenki koodin pätkä mut en vaan osaa yhdistää noita.

<html>
<head>
<title>Karuselli</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script type="text/javascript" src="js/shortcut.js"></script>

<script>
$(document).ready(function(){

	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(
		{
			xPos: 380,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});

</script>


</head>
<body>

<div id = "carousel1" style="width:750px; height:300px;background:#ffffff;overflow:scroll;">
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\1.png" alt="Description 1" title="Title 1" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\2.png" alt="Description 2" title="Title 2" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\3.png" alt="Description 3" title="Title 3" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\4.png" alt="Description 4" title="Title 4" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\5.png" alt="Description 5" title="Title 5" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\6.png" alt="Description 6" title="Title 6" /></a>

        </div>
<script>
shortcut.add("left", function() {
  $("left-but").click();
});

shortcut.add("right", function() {
  $("right-but").click();
});
</script>


</body>
</html>

Lisäys:

Ja tässä vielä karusellin koodi:

//////////////////////////////////////////////////////////////////////////////////
// CloudCarousel V1.0.5
// (c) 2011 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////

(function($) {

	// START Reflection object.
	// Creates a reflection for underneath an image.
	// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.
	// The position and size of the reflection gets updated by updateAll() in Controller.
	function Reflection(img, reflHeight, opacity) {

		var	reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent;

		parent = $(img.parentNode);
		this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];
        if ( !reflection.getContext &&  $.browser.msie) {
			this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];
			reflection.src = img.src;
			reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";

        } else {
			cntx = reflection.getContext("2d");
			try {


				$(reflection).attr({width: imageWidth, height: reflHeight});
				cntx.save();
				cntx.translate(0, imageHeight-1);
				cntx.scale(1, -1);
				cntx.drawImage(img, 0, 0, imageWidth, imageHeight);
				cntx.restore();
				cntx.globalCompositeOperation = "destination-out";
				gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
				gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
				cntx.fillStyle = gradient;
				cntx.fillRect(0, 0, imageWidth, reflHeight);
			} catch(e) {
				return;
			}
		}
		// Store a copy of the alt and title attrs into the reflection
		$(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} );

	}	//END Reflection object

	// START Item object.
	// A wrapper object for items within the carousel.
	var	Item = function(imgIn, options)
	{
		this.orgWidth = imgIn.width;
		this.orgHeight = imgIn.height;
		this.image = imgIn;
		this.reflection = null;
		this.alt = imgIn.alt;
		this.title = imgIn.title;
		this.imageOK = false;
		this.options = options;

		this.imageOK = true;

		if (this.options.reflHeight > 0)
		{
			this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);
		}
		$(this.image).css('position','absolute');	// Bizarre. This seems to reset image width to 0 on webkit!
	};// END Item object


	// Controller object.
	// This handles moving all the items, dealing with mouse clicks etc.
	var Controller = function(container, images, options)
	{
		var	items = [], funcSin = Math.sin, funcCos = Math.cos, ctx=this;
		this.controlTimer = 0;
		this.stopped = false;
		//this.imagesLoaded = 0;
		this.container = container;
		this.xRadius = options.xRadius;
		this.yRadius = options.yRadius;
		this.showFrontTextTimer = 0;
		this.autoRotateTimer = 0;
		if (options.xRadius === 0)
		{
			this.xRadius = ($(container).width()/2.3);
		}
		if (options.yRadius === 0)
		{
			this.yRadius = ($(container).height()/6);
		}

		this.xCentre = options.xPos;
		this.yCentre = options.yPos;
		this.frontIndex = 0;	// Index of the item at the front

		// Start with the first item at the front.
		this.rotation = this.destRotation = Math.PI/2;
		this.timeDelay = 1000/options.FPS;

		// Turn on the infoBox
		if(options.altBox !== null)
		{
			$(options.altBox).css('display','block');
			$(options.titleBox).css('display','block');
		}
		// Turn on relative position for container to allow absolutely positioned elements
		// within it to work.
		$(container).css({ position:'relative', overflow:'hidden'} );

		$(options.buttonLeft).css('display','inline');
		$(options.buttonRight).css('display','inline');

		// Setup the buttons.
		$(options.buttonLeft).bind('mouseup',this,function(event){
			event.data.rotate(-1);
			return false;
		});
		$(options.buttonRight).bind('mouseup',this,function(event){
			event.data.rotate(1);
			return false;
		});

		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
		if (options.mouseWheel)
		{
			$(container).bind('mousewheel',this,function(event, delta) {
					 event.data.rotate(delta);
					 return false;
				 });
		}
		$(container).bind('mouseover click',this,function(event){

			clearInterval(event.data.autoRotateTimer);		// Stop auto rotation if mouse over.
			var	text = $(event.target).attr('alt');
			// If we have moved over a carousel item, then show the alt and title text.

			if ( text !== undefined && text !== null )
			{

				clearTimeout(event.data.showFrontTextTimer);
				$(options.altBox).html( ($(event.target).attr('alt') ));
				$(options.titleBox).html( ($(event.target).attr('title') ));
				if ( options.bringToFront && event.type == 'click' )
				{

					var	idx = $(event.target).data('itemIndex');
					var	frontIndex = event.data.frontIndex;
					//var	diff = idx - frontIndex;
                    var        diff = (idx - frontIndex) % images.length;
                    if (Math.abs(diff) > images.length / 2) {
                        diff += (diff > 0 ? -images.length : images.length);
                    }

					event.data.rotate(-diff);
				}
			}
		});
		// If we have moved out of a carousel item (or the container itself),
		// restore the text of the front item in 1 second.
		$(container).bind('mouseout',this,function(event){
				var	context = event.data;
				clearTimeout(context.showFrontTextTimer);
				context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000);
				context.autoRotate();	// Start auto rotation.
		});

		// Prevent items from being selected as mouse is moved and clicked in the container.
		$(container).bind('mousedown',this,function(event){

			event.data.container.focus();
			return false;
		});
		container.onselectstart = function () { return false; };		// For IE.

		this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];

		// Shows the text from the front most item.
		this.showFrontText = function()
		{
			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
			$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
			$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));
		};

		this.go = function()
		{
			if(this.controlTimer !== 0) { return; }
			var	context = this;
			this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);
		};

		this.stop = function()
		{
			clearTimeout(this.controlTimer);
			this.controlTimer = 0;
		};


		// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
		this.rotate = function(direction)
		{
			this.frontIndex -= direction;
			this.frontIndex %= items.length;
			this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
			this.showFrontText();
			this.go();
		};


		this.autoRotate = function()
		{
			if ( options.autoRotate !== 'no' )
			{
				var	dir = (options.autoRotate === 'right')? 1 : -1;
				this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
			}
		};

		// This is the main loop function that moves everything.
		this.updateAll = function()
		{
			var	minScale = options.minScale;	// This is the smallest scale applied to the furthest item.
			var smallRange = (1-minScale) * 0.5;
			var	w,h,x,y,scale,item,sinVal;

			var	change = (this.destRotation - this.rotation);
			var	absChange = Math.abs(change);

			this.rotation += change * options.speed;
			if ( absChange < 0.001 ) { this.rotation = this.destRotation; }
			var	itemsLen = items.length;
			var	spacing = (Math.PI / itemsLen) * 2;
			//var	wrapStyle = null;
			var	radians = this.rotation;
			var	isMSIE = $.browser.msie;

			// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
			// See http://dev.opera.com/articles/view/efficient-javascript/?page=3
			this.innerWrapper.style.display = 'none';

			var	style;
			var	px = 'px', reflHeight;
			var context = this;
			for (var i = 0; i<itemsLen ;i++)
			{
				item = items[i];

				sinVal = funcSin(radians);

				scale = ((sinVal+1) * smallRange) + minScale;

				x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
				y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);

				if (item.imageOK)
				{
					var	img = item.image;
					w = img.width = item.orgWidth * scale;
					h = img.height = item.orgHeight * scale;
					img.style.left = x + px ;
					img.style.top = y + px;
					img.style.zIndex = "" + (scale * 100)>>0;	// >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.
					if (item.reflection !== null)
					{
						reflHeight = options.reflHeight * scale;
						style = item.reflection.element.style;
						style.left = x + px;
						style.top = y + h + options.reflGap * scale + px;
						style.width = w + px;
						if (isMSIE)
						{
							style.filter.finishy = (reflHeight / h * 100);
						}else
						{
							style.height = reflHeight + px;
						}
					}
				}
				radians += spacing;
			}
			// Turn display back on.
			this.innerWrapper.style.display = 'block';

			// If we have a preceptable change in rotation then loop again next frame.
			if ( absChange >= 0.001 )
			{
				this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);
			}else
			{
				// Otherwise just stop completely.
				this.stop();
			}
		}; // END updateAll

		// Create an Item object for each image
//		func = function(){return;ctx.updateAll();} ;

		// Check if images have loaded. We need valid widths and heights for the reflections.
		this.checkImagesLoaded = function()
		{
			var	i;
			for(i=0;i<images.length;i++) {
				if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete)  ))
				{
					return;
				}
			}
			for(i=0;i<images.length;i++) {
				 items.push( new Item( images[i], options ) );
				 $(images[i]).data('itemIndex',i);
			}
			// If all images have valid widths and heights, we can stop checking.
			clearInterval(this.tt);
			this.showFrontText();
			this.autoRotate();
			this.updateAll();

		};

		this.tt = setInterval( function(){ctx.checkImagesLoaded();},50);
	}; // END Controller object

	// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
	$.fn.CloudCarousel = function(options) {

		this.each( function() {

			options = $.extend({}, {
							   reflHeight:0,
							   reflOpacity:0.5,
							   reflGap:0,
							   minScale:0.5,
							   xPos:0,
							   yPos:0,
							   xRadius:0,
							   yRadius:0,
							   altBox:null,
							   titleBox:null,
							   FPS: 30,
							   autoRotate: 'no',
							   autoRotateDelay: 1500,
							   speed:0.2,
							   mouseWheel: false,
								 bringToFront: false
			},options );
			// Create a Controller for each carousel.
			$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
		});
		return this;
	};

})(jQuery);

neau33 [08.03.2012 10:44:44]

#

Moi makkke_!

vääntele näistä

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).keyup(function(e) {
     var code = e.keyCode?e.keyCode:e.which;
     if(code==37){
          alert("vasen nuolinäppäin"); //testi
          //$("#left-but").mouseup(); //?
     }
     if(code==39){
          alert("oikea nuolinäppäin"); //testi
          //$("#right-but").mouseup(); //?
     }
});
</script>
</head>
     <body>
     </body>
<html>

makkke_ [08.03.2012 11:58:38]

#

En saanut toimimaan vieläkään (eli ei pyörähdä seuraavaan kuvaan nuolilla) mutta kiitos avusta ja jos on jotain ideoita niin kertokaa :)

<html>
<head>
<title>Karuselli</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script>
$(document).ready(function(){

	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(
		{
			xPos: 380,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});

</script>
<script language="javascript">
document.onkeyup=function(event)
{
     var code;

     if(window.event){
          code=window.event.keyCode
     }
     else{
          code=event.which;
     }

     if(code==37){
          $("left-but").click();
     }
     if(code==39){
          $("right-but").click();
     }
}
</script>

</head>
<body>

<div id = "carousel1" style="width:750px; height:300px;background:#ffffff;overflow:scroll;">
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\1.png" alt="Description 1" title="Title 1" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\2.png" alt="Description 2" title="Title 2" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\3.png" alt="Description 3" title="Title 3" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\4.png" alt="Description 4" title="Title 4" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\5.png" alt="Description 5" title="Title 5" /></a>
<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\6.png" alt="Description 6" title="Title 6" /></a>

        </div>



</body>
</html>

neau33 [08.03.2012 14:12:47]

#

Moi taas makkke_!

here's the whole shit...

<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/cloud-carousel.1.0.5.js"></script>
<script language="javascript">
$(document).ready(function(){
     $("#carousel1").CloudCarousel(
          {
               xPos: 380,
               yPos: 32,
               buttonLeft: $("#left-but"),
               buttonRight: $("#right-but"),
               altBox: $("#alt-text"),
               titleBox: $("#title-text")
          }
     );
});

$(document).keyup(function(e) {
     var code = e.keyCode?e.keyCode:e.which;
     if(code==37){
         $("#left-but").mouseup();
     }
     if(code==39){
         $("#right-but").mouseup();
     }
});
</script>
</head>
     <body>
	<div id = "carousel1" style="width:750px; height:300px;background:#ffffff;overflow:scroll;">
		<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\1.png" alt="Description 1" title="Title 1" /></a>
		<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\2.png" alt="Description 2" title="Title 2" /></a>
		<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\3.png" alt="Description 3" title="Title 3" /></a>
		<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\4.png" alt="Description 4" title="Title 4" /></a>
		<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\5.png" alt="Description 5" title="Title 5" /></a>
		<a href="\xampp\htdocs\"> <img class = "cloudcarousel" src="images\6.png" alt="Description 6" title="Title 6" /></a>
        </div>
        <!-- type="hidden" jos et halua, että nappi näkyy -->
	<input id="left-but"  type="hidden" value="Left" />
	<input id="right-but" type="hidden" value="Right" />
	<p id="title-text"></p>
	<p id="alt-text"></p>
     </body>
<html>

makkke_ [08.03.2012 19:44:56]

#

KIITOS MIELETTÖMÄSTI! Omat taidot ei todellakaan riitä perus html pidemmälle... pelastit iltani koska tämä oli erittäin tärkeä juttu, KIITOS.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta