BG pics in JS cript "sliding doors"

peko · 13 sep 2009

Hoi,

Momenteel gebruik ik "jquery-1.3.1.min.js" samen met "jquery.easing.1.3.js" om teksten te tonen bij plaatjes on mouseOver. Het principe noemt men sliding doors.

Nu wil ik de getoonde teksten veranderen in afbeeldingen. Dus bij elke div (zie html code) een andere afbeelding tijdens het hooveren.

Het Javasript werkt samen met een CSS welke in de head is opgenomen. Ik heb reeds getracht om het CSS en de HTML aan te passen maar dat heeft niet het beoogde resultaat.

De html code van de voorbeeld pagina is als volgt:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script src="js/jquery-1.3.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<title>Sliding Door Effect from Queness</title>
<script>

$(document).ready(function() {

	//Custom settings
	var style_in = 'easeOutBounce';
	var style_out = 'jswing';
	var speed_in = 1000;
	var speed_out = 300;	

	//Calculation for corners
	var neg = Math.round($('.qitem').width() / 2) * (-1);	
	var pos = neg * (-1);	
	var out = pos * 2;
	
	$('.qitem').each(function () {
	
		url = $(this).find('a').attr('href');
		img = $(this).find('img').attr('src');
		alt = $(this).find('img').attr('img');
		
		$('img', this).remove();
		$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
		$(this).children('div').css('background-image','url('+ img + ')');

		$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});	
		$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});	
		$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});	
		$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});	

	}).hover(function () {
	
		$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});	
		$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});	
				
	},
	
	function () {

		$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});	
	
	}).click (function () {
		window.location = $(this).find('a').attr('href');	
	});
	
	

});

</script>
<style>

body {
	font-family:arial;	
}

.qitem {
	width:126px;
	height:126px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	background: url('bg.gif') no-repeat;
	
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
	cursor:hand; cursor:pointer;
}

	.qitem img {
		border:0;
	
		/* allow javascript moves the img position*/
		position:absolute;
		z-index:200;
	}

	.qitem .caption {
		position:absolute;
		z-index:0;	
		color:#ccc;
		display:block;
	}

		.qitem .caption h4 {
			font-size:12px;
			padding:10px 5px 0 8px;
			margin:0;
			color:#369ead;
		}

		.qitem .caption p {
			font-size:10px;	
			padding:3px 5px 0 8px;
			margin:0;
		}



/* Setting for corners */

.topLeft, .topRight, .bottomLeft, .bottomRight {
	position:absolute;
	background-repeat: no-repeat; 
	float:left;
}

.topLeft {
	background-position: top left; 	
} 

.topRight {
	background-position: top right; 
} 

.bottomLeft {
	background-position: bottom left; 
} 

.bottomRight {
	background-position: bottom right; 
}

.clear {
	clear:both;	
}
</style>
</head>

<body>


<div class="qitem">
	<a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
	<a href="#"><img src="2.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Umbrella</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>

</div>

<div class="qitem">
	<a href="#"><img src="3.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Maximum</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="clear"></div>

<div class="qitem">
	<a href="#"><img src="4.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>litle Blackbird</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>

</div>

<div class="qitem">
	<a href="#"><img src="5.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>infinity crime</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
	<a href="#"><img src="6.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Indacy</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>

</div>

<div class="clear"></div>

<div class="qitem">
	<a href="#"><img src="7.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Moon Balloon</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

<div class="qitem">
	<a href="#"><img src="8.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Yes Media</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>

</div>

<div class="qitem">
	<a href="#"><img src="9.gif" alt="Test 1" title="" width="126" height="126"/></a>
	<span class="caption"><h4>Balloon Chef</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

</body>

</html>

Kortom ik wil dat er onder elke afbeelding (bij mouseOver) een ander plaatje getoond wordt.

Alvast dank voor de input
Grt P

ErikBooy007 · 13 sep 2009

Is het niet gewoon een kwestie van de teksten in de <span>'s veranderen naar images?

Dus van:

HTML:

<span class="caption"><h4>Balloon Chef</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>

maak je dan:

HTML:

<span class="caption"><img src="plaatje.jpg" alt="plaatje" /></span>

Of is dat te makkelijk gedacht...?

peko · 13 sep 2009

Dank voor je snelle antwoord.

Bij mijn weten heb ik dit al geprobeerd maar ga het nogmaals doen. Wat ik mij herinner is dat er niets of een deel van de afbeelding getoond werd

ErikBooy007 · 13 sep 2009

Zet het anders even ergens online, zodat we het ook kunnen bekijken.

En wil je de volgende keer je code even tussen

HTML:

tags zetten? Dat maakt het iets leesbaarder en het voorkomt dat er smilies in je code staan

peko · 13 sep 2009

voor een betere beeldvorming ik het bestandje op de server gezet:

http://jpkdesign.nl/slicing/

ErikBooy007 · 13 sep 2009

Het werkt prima hoor, als je maar zorgt dat je afbeelding de goede afmetingen heeft.

Dan haal je de <h4> weg en zet je de afbeelding in de <p>

peko · 13 sep 2009

helaas werkt niet. Er wordt geen afbeelding getoond. Ik heb een van de andere gif's gebruikt als achtergrond met de <p> tag maar helaas. Alleen tekst wordt getoond. Ik weel dat je het css kunt aanpassen voor elke afbeelding maar dan krijg je een wel heel lange css.

ErikBooy007 · 13 sep 2009

Ik heb het net geprobeerd en het werkt gewoon wel.

Ik heb bij het eerste item

HTML:

<h4>Night Club</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

vervangen door:

HTML:

<p>
<img src="http://www.urgh.nl/style/images/logo.png" alt="logo" style="width: 126px; height: 126px;"/>
</p>

En dat werkt gewoon hoor. No problemo.

peko · 13 sep 2009

bij mij wil dit maar niet lukken. Heb je misschien ook iets in het JS of CSS veranderd?

ErikBooy007 · 13 sep 2009

Nee, helemaal niets. Zet de aangepaste versie eens online... Dan kunnen we kijken wat er misgaat. Zo kunnen we slechts gokken.

peko · 13 sep 2009

kijk ff via de link naar de code.
Ik heb de regel zoals jij hebt voorgesteld veranderd en de css (.qitem) aangepast zodat de bg.gif niet meer getoond wordt.

ErikBooy007 · 13 sep 2009

Hmpf, vreemd ik zie niets vreemds aan je code, maar Firebug doet wel apart. Hij geeft je <a> en <span> tags als selfclosing weer ( /> ).

Ik kijk er straks nog even naar (ben nu in de baas z'n tijd bezig, wordt hier niet echt gewaardeerd)...

BG pics in JS cript "sliding doors"

peko

Gebruiker

ErikBooy007

Terugkerende gebruiker

peko

Gebruiker

ErikBooy007

Terugkerende gebruiker

peko

Gebruiker

ErikBooy007

Terugkerende gebruiker

peko

Gebruiker

ErikBooy007

Terugkerende gebruiker

peko

Gebruiker

ErikBooy007

Terugkerende gebruiker

peko

Gebruiker

ErikBooy007

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy