Archief - Vraag voor wordpress kenners!

profound · 3 dec 2012

Goededag!

Ik zit met een probleem; ik heb een wordpress portfolio theme, waarbij de items op een bepaalde manier geanimeerd worden.

Portfolio

Als je op architectuur ofzo klikt dan begint de animatie. Ik zou nu graag willen dat alle items op hun plaats blijven, en gewoon in- of outfaden. Als je op 'Objecten' klikt, dan moeten alle objecten gewoon op hun plaats blijven, en de overige items moeten opacity 0.3 krijgen bijvoorbeeld.
Iemand een idee hoe ik dit aanpak. Het animeren gebeurt blijkbaar met isotope en jquery, het probleem is voornamelijk dat ik het stuk code niet kan vinden waar wordt meegegeven hoe de animatie er moet uitzien.

Momenteel krijgen de items die niet van toepassing zijn gewoon opacity 0, en de relevante items worden naar de eerste, tweede, ... plaats gezet.

Dit illustreert hoe het er zou moeten uitzien;
Aware | An Ultra Interactive Portfolio Theme

Bedankt!

profound · 5 dec 2012

Niemand?

woony · 5 dec 2012

als ik snel check, gebeurd het in murmur.js.
Daar vind je dit terug, ctrl-f het even. verander daar het nodige

Code:

hiddenStyle:{opacity:0,scale:.001},visibleStyle:{opacity:1,scale:1},containerStyle:{position:"relative",overflow:"hidden"},animationEngine:"best-available",animationOptions:{queue:!1,duration:800},

profound · 6 dec 2012

Yup daar heb ik al wat in zitten wijzigen, maar ik weet niet goed waar de animatie zelf kan 'disabelen'. Das het enige wat nu nog fout is; dat de relevante items geanimeerd worden.

Op de website van isotope staat het volgende
Options · Isotope Docs

"Isotope uses CSS3 transforms to position item elements, when available in the browser. Setting transformsEnabled to false will disable this feature so all browsers use top/left absolute positioning. Useful for resolving issues with CSS transforms.

If you do disable transforms, but still want to use CSS transitions, you’ll need add the following CSS:

.isotope .isotope-item {
-webkit-transition-property: top, left, opacity;
-moz-transition-property: top, left, opacity;
-ms-transition-property: top, left, opacity;
-o-transition-property: top, left, opacity;
transition-property: top, left, opacity;
}"

Dus zet ik de transformsenabled property op false, maar dan gebeurt er gewoonweg niets meer (zelfs de opacity verandert niet).

Als ik de css toevoeg dan werkt het weer zoals vanouds, maarja...

:help:

profound · 10 dec 2012

Niemand een idee...?

profound · 16 dec 2012

Of wie iemand kent die mij kan helpen, moet gewoon iemand zijn met php kennis hoor.....met vergoeding, prijs overeen te komen. Asap!

Danku

KenSpectre · 17 dec 2012

Dit is eerder een combo van js en css denk ik, ipv php

Dieterg · 17 dec 2012

Het ziet er naar uit dat je alles goed hebt ingesteld volgens hun website. Ik vind zelf de fout ook niet. In ieder geval, waarom maak je dit niet zelf? Dat is toch niet zo moeilijk? Hier een klein voorbeeldje, het zou niet zo moeilijk zijn om hier zelf animatie aan toe te voegen..:

HTML:

<! DOCTYPE html>

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				$('ul li a').click(function() {
					var $click = $(this);
                                        var clickHtml = $click.html();

					$('#images a').removeClass('hide');

					$('#images img').each(function(i, data) {
						var $this = $(this);
						var alt = $this.attr('alt');

						if(alt !== clickHtml && clickHtml !== "All") {
							$this.parent().addClass('hide');
						}
					})
				});

				$('#images a.hide').live('click',function() {
					return false;
				});
			});
		</script>

		<style type="text/css">
			.hide {
				opacity: 0.2;
			}

		</style>

	</head>

	<body>
		<ul>
			<li><a href="#">All</a></li>
			<li><a href="#">Architectuur</a></li>
			<li><a href="#">Meubel</a></li>
			<li><a href="#">Objecten</a></li>
		</ul>
		<div id="images">
			<a href="http://www.google.be"><img src="http://placehold.it/150x150" alt="Objecten"/></a>
			<a href="http://www.google.be"><img src="http://placehold.it/150x150" alt="Architectuur"/></a>
			<a href="http://www.google.be"><img src="http://placehold.it/150x150" alt="Architectuur"/></a>
			<a href="http://www.google.be"><img src="http://placehold.it/150x150" alt="Meubel"/></a>
			<a href="http://www.google.be"><img src="http://placehold.it/150x150" alt="Meubel"/></a>
			<a href="http://www.google.be"><img src="http://placehold.it/150x150" alt="Objecten"/></a>
			<a href="http://www.google.be"><img src="http://placehold.it/150x150" alt="Objecten"/></a>
		</div>
	</body>
</html>

profound · 18 dec 2012

Wel, het probleem is da et ne wordpress site is. Het zelf maken is idd niet moeilijk, ma om het zelf te maken en het te integreren met wordpress is niet zo evident.

Gij gaat daar bijvoorbeeld kijken naar uw alt property om te zien in welke categorie een afbeelding thuishoort. Op de site is da niet het geval, en ik weet niet hoe hij gaat bepalen welke afbeelding bij welke categorie hoort.... dus kan ek moeilijk zelf de code schrijve

Vandaar da ek iemand nodig heb die wa verstand heeft van hoe wp in elkaar zit.

Ma alvast bedankt voor de replies!

edit: blijkbaar geeft hij toch de categorie met de class mee!

Dieterg · 18 dec 2012

Dat integreren in wordpress is ook echt niet moeilijk ze.

Desnoods maak je gewoon een nieuw template met de structuur van uw homepagina. Daarna laad je gewoon de data rechstreeks in die pagina. Is misschien niet zo evident maar het kan al tellen als 'nood-oplossing'.

profound · 18 dec 2012

Ok, het werkt. Maar stel nu dat ik ze wil in laten faden, hoe zou ik dit dan aanpakken, aangezien het enige wat ik doe gewoon een class toevoegen of verwijderen is. En ik zou liefst niet met css-transitions werken.

Dit is de huidige js die ik gebruik;

Code:

    $('ul#filters li a').click(function () {
        var $globalThis= $(this);
        var elementName= $globalThis.html().toLocaleLowerCase();

        $('#content li').removeClass('hide');

        $('#content li').each(function () {
            var $this = $(this);
            var klasse = $this[0].className;

            var isCategory = true;

            var categoryIndex = $this[0].className.split(" ").indexOf(elementName);
            if(categoryIndex == -1 ){
                isCategory = false;
            }
            if (!isCategory && elementName!== "all") {
                $this[0].className += " " + 'hide';
            }
        })
    });
});

Dieterg · 19 dec 2012

Code:

$('ul#filters li a').click(function () {
        var $globalThis= $(this);
        var elementName= $globalThis.html().toLocaleLowerCase();

        $('#content li').fadeIn('slow' ,function() {
              $(this).removeClass('hide');
        });


        $('#content li').each(function () {
            var $this = $(this);
            var klasse = $this[0].className;

            var isCategory = true;

            var categoryIndex = $this[0].className.split(" ").indexOf(elementName);
            if(categoryIndex == -1 ){
                isCategory = false;
            }
            if (!isCategory && elementName!== "all") {
                $this.fadeTo('slow', 0.25, function() {
                      $this[0].className += " " + 'hide';
                });
            }
        })
    });

Zoiets? Kan zijn dat het syntax foutjes bevat. Niet getest met andere woorden

profound · 19 dec 2012

Yup, khad et zelf ook al gevonde

Code:

$(document).ready(function () {
    $('ul#filters li a').click(function () {
        var $globalThis= $(this);
        var elementName= $globalThis.html().toLocaleLowerCase();

        $('#content li').fadeTo('slow', 1, function() {
        });

        $('#content li').each(function () {
            var $this = $(this);
            var klasse = $this[0].className;

            var isCategory = true;

            var categoryIndex = $this[0].className.split(" ").indexOf(elementName);
            if(categoryIndex == -1 ){
                isCategory = false;
            }
            if (!isCategory && elementName!== "all") {
                $this.fadeTo('slow', 0.18, function() {
                });
            }
        })
    });
});
    </script>

De 'hide' moet je zelfs niet meer aan toevoegen, aangezien de fadeTo dit afhandeld. Het enige probleem is dat het niet simultaan gebeurd....ze faden eerst terug in, en daarna gaan de items die niet bij die categorie horen uitfaden....

edit: ok, dit is het uiteindelijke resultaat;

Code:

$(document).ready(function () {
    $('ul#filters li a').click(function () {
        var $globalThis= $(this);
        var elementName= $globalThis.html().toLocaleLowerCase();

        $('#content li').each(function () {
            var $this = $(this);
            var klasse = $this[0].className;

            var isCategory = true;

            var categoryIndex = $this[0].className.split(" ").indexOf(elementName);
            if(categoryIndex == -1 ){
                isCategory = false;
            }
            if (!isCategory && elementName!== "all") {
                $this.fadeTo('slow', 0.18, function() {
                });
            }else{
		 $this.fadeTo('slow', 1, function() {
                });
	    }
        })
    });
});
    </script>

Nu gaan ze dus simultaan gaan faden.

Bedankt voor alle hulp Mam!

Misschien nog een klein vraagje; eenmaal je op een van de projecten klikt kom je op 'detailpagina' van dat project, met een of meerdere(slideshow) afbeeldingen, enige idee hoe ek op deze afbeeldingen een lightbox/fancybox toepas? Wordpress heeft een fancybox plugin, maar die doet helaas niet veel...

Dieterg · 19 dec 2012

Code:

$(document).ready(function () {
    $('ul#filters li a').click(function () {
        var $globalThis= $(this);
        var elementName= $globalThis.html().toLocaleLowerCase();

        $('#content li').each(function () {
            var $this = $(this);
            var klasse = $this[0].className;
            var isCategory= $this.hasClass(elementName);

            if (!isCategory && elementName!== "all") {
                $this.fadeTo('slow', 0.25);
            } else { 
                $this.fadeIn('slow');
            }
        })
    });
});

Btw je hebt functies om te testen of een element een klasse heeft. http://api.jquery.com/hasClass/

profound · 19 dec 2012

Ok, das handig, haha. Dat ek da ni gevonden heb

Dieterg · 19 dec 2012

Nu heb je alleen nog een probleem dat uw gefade elementen klikbaar zijn. Dat kan je wel oplossen door een dummy class toe te voegen.

Code:

$(document).ready(function () {
    $('ul#filters li a').click(function () {
        var $globalThis= $(this);
        var elementName= $globalThis.html().toLocaleLowerCase();
        $('#content li').removeClass('disabled');
        $('#content li').each(function () {
            var $this = $(this);
            var klasse = $this[0].className;
            var isCategory= $this.hasClass(elementName);

            if (!isCategory && elementName!== "all") {
                $this.fadeTo('slow', 0.25, function() {
                      $this.addClass('disabled');
                });
            } else { 
                $this.fadeIn('slow');
            }
        })
    });

   $('#content li.disabled a').live('click',function() {
	return false;
   });
});

Het lightbox probleem zie ik niet, misschien moet je die plugin even enablen? Of zeggen wat het probleem juist is.

profound · 19 dec 2012

Dat de gefade projecten klikbaar zijn is geen probleem voor de klant, het is vooral om onderscheid te kunnen maken

Het lightbox probleem ligt bij bijvoorbeeld dit project;

Objekt one

Er zijn verscheidene afbeeldingen in de slideshow, ik zou graag een lightbox op iedere image toepassen.
Plugin is enabled trouwens.

Dieterg · 19 dec 2012

Het probleem ligtem bij het aanmaken van die post denk. Ik weet niet hoe je die afbeeldingen toevoegt? Kan je kiezen om de afbeelding te doen linken naar de source afbeelding? Dat zou in principe moeten om lightbox te doen werken.

profound · 19 dec 2012

Dieterg zei:
Het probleem ligtem bij het aanmaken van die post denk. Ik weet niet hoe je die afbeeldingen toevoegt? Kan je kiezen om de afbeelding te doen linken naar de source afbeelding? Dat zou in principe moeten om lightbox te doen werken.

Da is inderdaad het probleem, maar aangezien er niets van settings aanwezig zijn wanneer je de afbeelding gaat linken ging dit onmogelijk. Ik heb dan gewoon maar zelf een functie geschreven;

Code:

        var $slides = $(".slides li img");
        $slides.each(function () {
            var $src = $(this).attr("src");
            var $aLink = new Element('a', {'href':$src });
            $(this).wrap($aLink);
        });

Dit werkt, maar het probleem is dat hij eerst de kader heel lang gaat maken, en daarna de kader aanpast aan de grootte van de afbeelding;
Geburen

Je moet maar eens op de image klikken, het zal snel duidelijk worden. Iemand een idee hoe dit komt?

edit: Mijn noodoplossing voor dit probleem is om de zooming-in tijd op 0 te zetten, zo gebeurt dit in principe nog steeds, maar zie je het gewoon niet. Normaal staan er op de fancyboxkader ook navigation-arrows (dit heb ik weg gedaan dus) om zo direct naar de volgende afbeelding te gaan. Wanneer je naar de volgende afbeelding gaat, zie je nog steeds dat de kader eerst heel lang wordt, en daarna zich aanpast aan de grootte van je img. Dit kan ik ook 'oplossen' door gewoonweg die navigation-arrows weg te laten, maar ik zou graag gewoon het probleem weten

Dus voor de duidelijkheid, klik gewoon hier Geburen op de afbeelding, en je zal het probleem zien.

Archief - Vraag voor wordpress kenners!

profound

Legacy Member

profound

Legacy Member

woony

Legacy Member

profound

Legacy Member

profound

Legacy Member

profound

Legacy Member

KenSpectre

Legacy Member

Dieterg

Legacy Member

profound

Legacy Member

Dieterg

Legacy Member

profound

Legacy Member

Dieterg

Legacy Member

profound

Legacy Member

Dieterg

Legacy Member

profound

Legacy Member

Dieterg

Legacy Member

profound

Legacy Member

Dieterg

Legacy Member

profound

Legacy Member