Zet de naam van de webshopextensie in de titel en vermeld verder in iedere vraag:

De exacte versie van Joomla! die je gebruikt
De exacte versie van de webshopextensie.
De volledige url van je website (indien mogelijk).

opgelost Mouseover categorie plaatjes

Mouseover categorie plaatjes

15 okt 2014 21:38

ik wil graag een mouseover effect hebben in de categorie pagina, zoals deze pagina

Ik weet inmiddels hoe ik twee plaatjes krijg: ik heb de volgende code, maar dan krijg ik de twee plaatjes naast elkaar:

Code:

<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
			<div class="image">
				    <a title="<?php echo $product->product_name ?>"  href="<?php echo $product->link; ?>">
				
						<?php

							echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
							echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false);
							
						?>
					 </a>

Ik moet hier dus (met java script ofzo?) een mouseover effect aan toevoegen waarbij het tweede plaatje dan over de eerste heengaat
Ik zit al twee dagen te zoeken maar wat ik ook doe, er gaat iets fout. Help?

Freedom09
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 10

Mouseover categorie plaatjes

16 okt 2014 01:38 - 16 okt 2014 01:39

Hoi Freedom09,

Namens het Joomla!NL team heet ik je van harte welkom op dit forum.

Misschien dat dit topic je verder helpt.

EDIT:
Nog een gevonden...

groetjes,
Anne

www.numijneigenwebsite.nl + www.nmew.nl - KvK Brabant: 17281897

Wil je Joomla!NL steunen? Dat kan met een donatie.

AnneM
Joomla!NL vriend(in)
Berichten: 1863

Mouseover categorie plaatjes

16 okt 2014 13:11

De eerste link komt in de buurt maar gaat over rpoductdetails. In de categorie pagina kan ik volgens mij geen $this gebruiken?

De tweede geeft alleen een hint over waar de plaatjes staan, dat wist ik al

Freedom09
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 10

Mouseover categorie plaatjes

16 okt 2014 14:19

Virtuemart 2.0 - Random images of category and subcategory

groetjes,
Anne

www.numijneigenwebsite.nl + www.nmew.nl - KvK Brabant: 17281897

Wil je Joomla!NL steunen? Dat kan met een donatie.

AnneM
Joomla!NL vriend(in)
Berichten: 1863

Mouseover categorie plaatjes

16 okt 2014 16:31 - 15 nov 2014 12:35

Als je zin hebt in een puzzeltje:
Deze drie bij elkaar (met een beetje aanpassen) geven je de oplossing:
forum.virtuemart.net/index.php?topic=124818.0
forum.virtuemart.net/index.php?topic=99699.msg358962#msg358962
davidwalsh.name/css-flip

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

Mouseover categorie plaatjes

15 nov 2014 12:30

Astrid, bedankt!
Uiteindelijk heb ik het gevonden, zonder al te moeilijke javascripts.

Volgende code in de plaats van de productafbeelding in de "category" override van de template geplaatst (css en php in de default.php):

Code:

<div class="product floatleft <?php echo $Browsecellwidth . $show_vertical_separator ?>">

				    <a title="<?php echo $product->product_name ?>"  href="<?php echo $product->link; ?>">


<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	max-width: 200px;
	width:100%;
	height: 200px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 400px){
.flip-container, .front, .back {
	max-width: 200px;
	width:100%;
	height: 100px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}	
	
}




/* flip speed goes here */
.flipper {
	transition: 0.5s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

</style type="text/css">


					
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
	<?php	echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false); ?>
		</div>
		<div class="back">
	<?php	echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false); ?>
		</div>
	</div>
</div>

					 </a>

Door de flip speed op 0,001 seconden te zetten krijg je ook geen draai effect meer. Er zij dus zelfs meer mogelijkheden hiermee

Freedom09
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 10

Moderators: Jelle, Romke

Tijd voor maken pagina: 0.712 seconden

Gemaakt door Kunena

Laatste nieuws

Welkom bij Joomla!NL

opgelost Mouseover categorie plaatjes

Mouseover categorie plaatjes

Mouseover categorie plaatjes

Mouseover categorie plaatjes

Mouseover categorie plaatjes

Mouseover categorie plaatjes

Mouseover categorie plaatjes

Laatste forumberichten

Wil je Joomla!NL steunen?