[OPGELOST] Hoe maak je query effect als bij Typofolio templ

[culdoc]

Ik wil op een website meerdere tekstblokken maken waarbij er eerst een afbeelding over de tekst staat, als je met je cursor er over gaat dan schuift hij weg en zie je de tekst.
Zoals bij het nieuws van http://www.i-arts.eu/typofolio/
Hoe werkt dit? Hoe kan ik dit netjes verwerken binnen CMSMS.

Ik heb de template ook geprobeerd, maar dan werkte het effect niet bij het nieuws, wellicht doordat er een nieuwe CMSMS versie is?

Het lijkt mij niet zo heel moeilijk maar ben hierin een leek...
De afbeelding wordt bv 300 x 200 pixels, daarin zal dan ook de tekst moeten plaatsvinden.

[mcDavid]

Heb je ook de scripts geinstalleerd?

in het functions.js script staat een jquery functie genaamd
// Newssummary image overlay, die regelt die overlay.

[culdoc]

Of zo iets als dit:
http://www.queness.com/resources/html/t ... index.html
uitleg:
http://www.queness.com/post/844/create- ... ing-jquery

Ik heb het geprobeerd, de javascript in {literal} {/literal} gezet

maar de afbeelding wordt ineens erg groot als je erover heen gaat...

[culdoc]

Ja ik had alles geinstalleerd... ook de scripts.
Staan als je de template intalleerd ook in de juiste map op de server.

[culdoc]

Als iemand een ander goed, werkend script weet dan mag je dit uiteraard melden!

[culdoc]

Ik heb nu http://www.queness.com/post/844/create- ... ing-jquery geprobeerd.

Bij http://www.dorpenpromotie.nl/ wordt nu de afbeelding elke keer groter als je erover heen gaat en de caption is eronder ipv erboven.
Wat gaat er fout?

Dit is in het sjabloon in de header:

Code: Select all

{literal}
<__script__ src="uploads/js/jquery-1.3.1.min.js"></__script>

<__script__>

$(document).ready(function() {

	//move the image in pixel
	var move = -15;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;

	//On mouse over those thumbnail
	$('.item').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});

});

</__script>
{/literal}

en dit is de css van dit script:

Code: Select all

}

.item {
	width:300px;
	height:200px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.item .caption {
	width:300px;
	height:200px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:16px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

.item .caption p {
	padding:5px;	
	margin:0;
}


.clear {
	clear:both;	
}

[timdebuurman]

Zo te zien heb je m al voor elkaar.

[culdoc]

yep, ben nu aan het finetunen met css, conflicteertd soms met andere css