Imagemap verhuizen Wordpress naar Joomla

[Wackmack]

De originele pagina draait op Wordpress inclusief de plugin fancy box.
De pagina waar het heen moet draait op Joomla. Voor beide sites heb ik de inloggegevens.

Het gaat om deze pagina http://www.piaggio-bedrijfswagens.nl/dealers/
Hier staat een mooie imagemap inclusief mouse over/click.

Gisteren ben ik de hele dag bezig geweest om de code over te nemen en zelf aan te passen echter is mij dit niet gelukt. Volgens mij mis ik een groot gedeelte javascript. Net heb ik de fancybox gedownload voor Joomla maar snap er eerlijk gezegd nog weinig van.

Wat is de beste manier om de pagina te verhuizen?
Moet ik hiervoor toch Javascript gebruiken?

Zover ben ik nu gekomen http://www.allmotive.eu/producten/test-pagina
Als je met je muis over de provincies gaat zie je de provincies.

Hieronder zie je de provincies los, die moeten eigenlijk verschijnen als je met de muis over de provincies gaat. Hopelijk kunnen jullie mij de goede richting op sturen.

[Barryvdh]

Ja je hebt ook javascript nodig, zoek maar in de bron naar jQuery('#provincies .provincie')

[FotW]

Barry was me net voor, de benodigde javascript staat inderdaad gewoon in de bron, fancybox heeft hier overigens niets mee te maken.

[Wackmack]

Dat is dus duidelijk, ben al uren bezig geweest. Normaal werk ik altijd met HTML/CSS en dat gaat wel redelijk. Nu uitzoeken hoe ik het kan laten werken met Joomla. Normaal schrijf ik de HTML in de editor en de CSS is gemakkelijk aan te passen. Dit is toch de correcte code?

code:

<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
    
    jQuery('body').data('provincies', jQuery('#provincies').html());
    
    jQuery('#provincies .provincie').each(function(){
        if(!jQuery(this).hasClass('current'))
        {
            jQuery(this).remove();
        }
    }); 

    jQuery('#Map area').hover(
    function(){
        jQuery('#image-'+jQuery(this).attr('hover')).fadeTo('fast', 0.8, function() {
            // Animation complete.
        }); 
     },
    function(){
        jQuery('#image-'+jQuery(this).attr('hover')).fadeTo('fast', 0, function() {
            // Animation complete.
        }); 
    });

    jQuery('#Map area').click(
    function(e){
        e.preventDefault();
        
        jQuery('#provincies').html(jQuery('body').data('provincies'));
        
        jQuery('.current').removeClass('current'); 
            
        jQuery('#image-'+jQuery(this).attr('hover')).addClass('current'); 
        jQuery('#prov-'+jQuery(this).attr('hover')).addClass('current'); 
        
        jQuery('#provincies .provincie').each(function(){
            if(!jQuery(this).hasClass('current'))
            {
                jQuery(this).remove();
            }
        });
        
    });

});
</script>

[ Voor 71% gewijzigd door Wackmack op 10-10-2013 12:04 ]

[FotW]

Ja dat is de correcte code, maar als je je imagemap om te beginnen al geen id meegeeft gaat het sowieso niet werken. Daarnaast laad je volgens mij jQuery meerdere keren in.

Begin eens met een uitgeklede testcase op bv JSFiddle en zet daar alleen je imagemap en relevante javascript in.

[Wackmack]

Goed idee, ga aan de slag ermee.

Dit heb ik nu gedaan, even zo kaal mogelijk.
http://jsfiddle.net/robdegekste/RUG96/

Beide plaatjes worden geladen maar het rode plaatje werkt nog niet icm java.
Heb echt nul verstand van java dus ga nu snel de basic principe lezen om te leren wat er fout gaat.

[ Voor 80% gewijzigd door Wackmack op 10-10-2013 16:51 ]

[Wackmack]

Met javascript kom ik nog niet verder daarom heb ik maar even voor deze tijdelijke oplossing gekozen.

http://allmotive.eu/producten/test-pagina

Ga nu kijken of ik de dealer per provincie naast de kaart kan krijgen als je erop klikt.

[FotW]

Dit is toch wat je wil: http://jsfiddle.net/4fgq4/ of ben ik nou gek?

[ Voor 0% gewijzigd door FotW op 11-10-2013 12:58 . Reden: Typo's ]

[Wackmack]

Ja! Heel graag, ziet er heel mooi uit, awesome! Nu moet ik even kijken hoe ik het javascript werkend krijg in Joomla. CSS is goed toe te voegen en de HTML lukt. In ieder geval super bedankt.

[FotW]

Versteegrob schreef op vrijdag 11 oktober 2013 @ 13:27:
Ja! Heel graag, ziet er heel mooi uit, awesome! Nu moet ik even kijken hoe ik het javascript werkend krijg in Joomla. CSS is goed toe te voegen en de HTML lukt. In ieder geval super bedankt.

Volgens mij was je probleem niet de javascript maar het ontbreken van de juiste css, waarschijnlijk omdat je de map een ander/geen id had gegeven

[ Voor 7% gewijzigd door FotW op 11-10-2013 13:33 ]

[HaveHam]

Nog wel een tip.
Als je Javascript of andere elementen gaat gebruiken in artikelen via de Joomla backend, zorg ervoor dat je in Plugins > TinyMCE > Basic Options de Prohibited Elements waarde veranderd naar CMS.

[Wackmack]

FotW schreef op vrijdag 11 oktober 2013 @ 13:32:
[...]


Volgens mij was je probleem niet de javascript maar het ontbreken van de juiste css, waarschijnlijk omdat je de map een ander/geen id had gegeven

Correct, heel dom maar niet aan gedacht. Nu even kijken hoe ik java toevoeg aan Joomla maar dat moet wel lukken.

HaveHam schreef op vrijdag 11 oktober 2013 @ 13:38:
Nog wel een tip.
Als je Javascript of andere elementen gaat gebruiken in artikelen via de Joomla backend, zorg ervoor dat je in Plugins > TinyMCE > Basic Options de Prohibited Elements waarde veranderd naar CMS.

Zal het aanpassen alleen waarom is dit?

[ Voor 32% gewijzigd door Wackmack op 11-10-2013 14:20 ]

[HaveHam]

Omdat anders bepaalde elementen (Javascript) niet worden toegestaan (opgeslagen). En dan heb je uiteraard een bug fest op de frontend.

[ Voor 7% gewijzigd door HaveHam op 11-10-2013 14:34 ]

[Wackmack]

Bedankt, heb het aangepast in Joomla.

Net de hele HTML code verandert. Alle data is nu correct. Heb in de Fiddle file gewerkt, alles heb ik goed verandert en het werkt goed. Net wilde ik even een nieuwe versie aanmaken op Fiddle en nu is "ineens" mijn javascript niet goed terwijl ik alleen wat adressen heb verandert/toegevoegd.

Dit is de http://jsfiddle.net/robdegekste/aqNAj/ en de error is {"error": "Please use POST request"}
Iemand een idee waarom ik de error krijg?

Dit is de originele van FotW. http://jsfiddle.net/4fgq4/ Als ik alles letterlijk kopieer en een nieuwe Fiddle maak dan werkt het niet, heel apart.

[Barryvdh]

Je bent jQuery vergeten te selecteren.

[Wackmack]

Oeps, bedankt.

[Wackmack]

Ik ben bezig om alles te importeren maar loop tegen een probleem aan.

De HTML code kan ik in de artikel pagina toevoegen, dit is geen probleem.
De CSS code voeg ik toe aan de style sheet.

Nu komt het moeilijkste. De jQuery toevoegen. Heb net veel gelezen dat veel mensen de volgende plugin gebruiken http://extensions.joomla....ance/jquery-scripts/18327

Nu ben ik aan het kijken waar ik de jQuery kan toevoegen op de server.
Zodra dit gebeurt is ga ik kijken hoe ik de verwijzing naar de HTML pagina maak.

[Wackmack]

Ben heel wat stappen verder. Heb alles geïmporteerd in de site, jQuery/HTML in een artikel in HTML modus en CSS in css.style. In Firefox werkt alles alleen het goed door klikken nog niet.

code:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function() {
</script>
Javascript komt hieronder
[HTML code komt hieronder]

Het verschil is groot in de drie browsers

http://allmotive.eu/producten/test-pagina
http://www.dfsk-citytruck...nsporter/test-pagina.html

Chrome - DFSK - Imagemap wordt nog niet samen gevoegd
Chrome - Allmotive - Imagemap oogt perfect alleen mouseover/click werkt nog niet
IE - DFSK - Mouseover werkt perfect, nog geen juiste click
IE - Allmotive - Imagemap oogt perfect alleen mouseover/click werkt nog niet
Firefox - DFSK - Mouseover werkt perfect, nog geen juiste click
Firefox - Allmotive - Imagemap oogt perfect alleen mouseover/click werkt nog niet

Nu opzoek waarom de click op een provincie niet goed wordt uitgevoerd. Verder uitzoeken waarom DFSK in Chrome niet goed wordt geladen en in Firefox juist wel. Zodra het mij gelukt is zal ik de input hier neerzetten zodat leden het misschien kunnen gebruiken in de toekomst.

[ Voor 4% gewijzigd door Wackmack op 16-10-2013 12:01 ]

[Wackmack]

jQuery werkt nu op beide test sites alleen de belangrijkste stap, het tonen van informatie als je op de provincie klikt lukt maar niet. Net geprobeert te werken met hyperlinks alleen lukt dit alleen met rechtmuisknop op de provincie, dus deze oplossing valt ook af. Zo frustrerend als het bijna af is alleen de laatste klik werkt niet goed. Het rare is dat current hover, wel wordt geladen namelijk provincie Noord-Holland. Waarom dan de andere provincies niet?

http://allmotive.eu/producten/test-pagina
http://www.dfsk-citytruck...nsporter/test-pagina.html

[FotW]

Als ik goed begrijp wat je nu aan het doen bent, wil je de oorspronkelijke werking van de map wijzigen (informatie van de provincie naast de kaart tonen) en in plaats daarvan per provincie naar een andere pagina doorlinken?

In dat geval moet je een stuk jQuery weghalen, namelijk:

code:

jQuery('#Map area').click(
    function(e){
        e.preventDefault();
        
        jQuery('#provincies').html(jQuery('body').data('provincies'));
        
        jQuery('.current').removeClass('current'); 
            
        jQuery('#image-'+jQuery(this).attr('hover')).addClass('current'); 
        jQuery('#prov-'+jQuery(this).attr('hover')).addClass('current'); 
        
        jQuery('#provincies .provincie').each(function(){
            if(!jQuery(this).hasClass('current'))
            {
                jQuery(this).remove();
            }
        });
        
    });

[Wackmack]

Update, de pagina van JSFiddle wordt niet meer goed weer gegeven. Reden om de pagina zelf te hosten. Het probleem waar ik niet uit kom ligt nog steeds bij Javascript.

Heb even snel een test-pagina gemaakt en het ziet er redelijk uit alleen de javascript werkt nog niet goed. Heb de HTML en de javascript in de pagina gezet. De CSS toegevoegd en dit ziet er ook goed uit.

Dit is de test pagina, http://www.dfsk-citytruck...nsporter/test-pagina.html

Javascript wordt wel geladen onder Joomla. Heb precies de code over genomen zoals die hier staat, http://jsfiddle.net/robdegekste/P9Kgs/37/

[Wackmack]

Net getest wat de pagina doet zo'n jQuery en dan is het een chaos.
Net de jQuery toegevoegd en dan ziet de imagemap er goed uit.
Wel werkt het plaatje nog niet en zijn de id verkeerd. Morgen op het werk verder kijken waar de fout is.

[ Voor 30% gewijzigd door Wackmack op 30-09-2014 08:33 ]