Pin spin ved hover wordpress

køre også på http://www.eksperten.dk/spm/1006260

du har lavet en class der hedder rotate
ref http://www.askov-hojskole.dk/testside-kort/

<style type="text/css">
.main-menu > ul > li:hover > a {color:#ffcc0d;}.secondary-menu ul > li:hover > a {color:#ffcc0d;}.main-menu > ul > .link-arrow > a:after{border-color:transparent transparent #ffcc0d;}.main-menu > ul > li > .sub-menu{border-top-color:#ffcc0d;}.modern .content-over-image figure:before{opacity:0.1;}.top-strip #searchform input, .top-strip #searchform button{color:#ffffff}.modern .content-over-image:hover figure:before{opacity:0.7;}.main-menu .sub-menu .sub-links a:after{background-color:#ffffff}.sidebar .widget{border-bottom:1px solid #000;}.footer-sidebar .widget_rss li:after,.footer-sidebar .widget_pages li a:after,.footer-sidebar .widget_nav_menu li a:after,.footer-sidebar .widget_categories ul li:after, .footer-sidebar .widget_recent_entries li:after,.footer-sidebar .widget_recent_comments li:after{background-color:#8c919b;}.footer-sidebar .widget_ti_latest_comments .comment-text:after{border-bottom-color:#242628;}.footer-sidebar .widget_ti_latest_comments .comment-text:before{border-bottom-color:#585b61;}.footer-sidebar .widget_ti_latest_comments .comment-text{border-color:#585b61;}
.sub-menu-columns .sub-menu .sub-links > .menu-item-has-children > a {color:#ffcc0d;}
.title-with-sep{background:url("http://www.askov-hojskole.dk/wp-content/themes/simplemag/images/section-header.png") repeat-x 0 50%;}
@media only screen and (min-width: 751px) {#gallery-carousel,#gallery-carousel .gallery-item{height:580px;}}
/* Custom CSS */
/*Rotate pin icon*/

.rotate {
  -webkit-transition:all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

.rotate:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
}</style>

problemet er at du ikke anvender den på nogle af dine img

på <img id="imapper1-pin8" class="rotate imapper1-pin
har jeg lagt rotate på, og så roterer det lille img on hover

<div id="imapper1-pin7-wrapper" class="imapper1-pin-wrapper imapper-pin-wrapper" style="position: absolute; left: 3.07988%; top: 72.2365%; transform: scale(1);" data-imapper-link="" data-category="" data-pin-color="transparent" data-top="72.23654426559357%" data-left="3.079884504331088%" data-open-position="top">
<img id="imapper1-pin7" class="imapper1-pin imapper-pin-type-custom pin-style" src="http://www.askov-hojskole.dk/wp-content/uploads/2015/09/Plus-01.png" style="top: -30px; left: -15px; z-index: 10;">

<div id="imapper1-pin8-wrapper" class="imapper1-pin-wrapper imapper-pin-wrapper" style="position: absolute; left: 2.6949%; top: 79.2379%; transform: scale(1);" data-imapper-link="" data-category="" data-pin-color="transparent" data-top="79.23792756539235%" data-left="2.6948989412897015%" data-open-position="top">
<img id="imapper1-pin8" class="rotate imapper1-pin imapper-pin-type-custom pin-style" src="http://www.askov-hojskole.dk/wp-content/uploads/2015/09/Plus-01.png" style="top: -30px; left: -15px; z-index: 10;">

så tilføj rotate klassen til alle dine id="imapper1-pinX"
tested med firebug

@tor tror ikke der findes ikke en folder der hedder /testside-kort/, navnet er lavet med permalinks i wordpress (CMS)
http://wp-guiden.dk/paene-links-med-wordpress.html

@Tinna Holck
tænke tidligere på dette, for at gøre det nemt
ref https://www.google.com/search?q=css+id+wildcard
http://stackoverflow.com/questions/5231105/is-there-a-way-to-use-wildcards-in-css-id-tag

bare en tanke: man må med jquery kunne appende den class til alle id startende med id="imapper1-pin" så er man fri for st skulle rette i samtlige img på siden
https://www.google.com/search?q=jquery+wildcard+id+selector
http://api.jquery.com/category/selectors/
utested

<script type="text/javascript">
$(document).ready(function() {
	$("[id^=imapper1-pin]").addClass('rotate');  
});
</script>

det burde jo ramme alle id'er startende med imapper1-pin, så imapper1-pin1 - imapper1-pin100 bliver ramt, så er man fri for at tilføje det på alle img

prøvede lige, der er tilsyneladende en confligt med $
har prøvet med https://api.jquery.com/jquery.noconflict/
men dette virker
indsæt dette script efter jQuery er indlæst, feks i bunden af siden

<script type="text/javascript">	
jQuery(document).ready(function() {
jQuery("[id^=imapper1-pin]").addClass('rotate');  
});
</script>

ref http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors

To get all the elements starting with "jander" you should use:
$("[id^=jander]")
To get those that end with "jander"
$("[id$=jander]")

nåå ikke, rammer vist lidt for meget, holder man musen over det popup'en med beskrivelse, roterer den også :-(

så er der nok kun det hårde arbejde. (sæt classen på alle der skal rammes)

Jeg kan sagtens putte det på i detaljer, men kan ikke finde det originale dokument,

tror jeg er vejen frem, set det på i detaljer, og lad WP styre sine filer selv

det meste har WP liggende i databasen

@Tor

ja men nu kører billederne også med rundt.

ja det er prisen for ikke at sætte rotate klassen manuelt, der bliver valgt for meget.
det skrev jeg også 29.09.15 10:45

nåå ikke, rammer vist lidt for meget, holder man musen over det popup'en med beskrivelse, roterer den også :-(

så er der nok kun det hårde arbejde. (sæt classen på alle der skal rammes)

af sammen årsag forslår jeg 30.09.15 10:51 at fjerne nogle af den igen med
$("[id$=wrapper]").removeClass("rotate"); // id slutter med wrapper

optimalt samler man de 2 selectors ( $("[id$=wrapper]") og $("[id^=imapper1-pin]") ) til 1 og sætter kun rotate på dem der skal sættes på


tilføjet 13:00
@Tinna Holck
hvorfor dog ikke bare ramme alle billederne der hedder Plus-01.png, og på disse sætte klassen rotate.

<script type="text/javascript">	
(function($) { // scope
$(document).ready(function() {	
	$( "img[src$='Plus-01.png']" ).addClass("rotate");	// billede stien ender med Plus-01.png
});
})(jQuery); 
</script>

Olsen for helvede KISS

Hej igen.

Jeg er med på det, mit problem er, at jeg ikke kan finde den php/html side hvor det står på... altså <img id="imapper1-pin8" class="imapper1-pin imapper-pin-type-custom pin-style" src="http://www.askov-hojskole.dk/wp-content/uploads/2015/09/Plus-01.png" style="top: -30px; left: -15px; z-index: 10;">


Jeg kan sagtens putte det på i detaljer, men kan ikke finde det originale dokument, hvori jeg kan rette det... Bruger DW som ftp.

Venlig hilsen Tinna

Det skal ligge i din /testside-kort/ jeg kan se du har flere mappe inde i den mappe men jeg tror den er i Index.php på den side du vil havde det rettet inde i /testside-kort/ mappen.

Åben index.php og søg efter imapper pin så skal du nok finde det.

Så skal du ind og indsætte de rotate som du fik af vide ^ af oppe i det andet indlæg. åbent koderedigering i DW eller Notepad og ret alle de hjul du skal havde til at snurre rundt og úpload så filen og erstat med den gamle så skulle det kører.

(http://www.askov-hojskole.dk/testside-kort/index.php)

Eftersom der jo ikke findes en /testside-kort/, hvordan skal jeg så putte det på? Jeg kan jo ikke gemme det, bare ved at putte det på detaljer... ?
Er der en mulighed for at hente det som ligger i databasen?

Venlig hilsen Tinna Holck

ja hent alle dine filer ned på din computer også søg efter imapper1-pin og se hvilke filer der dukker op.. Måske Ronny kender andre tricks jeg gør ikke...


Du kan downloade Total Commander gratis i 14 det program kan du bruge at søge efter tekst med så der burde du kunne finde det du søger bare på 1 gang i alle dine filer. Også skulle den meget gerne finde det automatisk hvilke filer der indholder det imapper1-pin. Også kan du redgire kildekoden manuelt.

Er der en mulighed for at hente det som ligger i databasen?

så skal du ind i phpmyadmin og exporterer din database, eller bedre installerer et backup plugin(bør du gøre).
ref https://www.google.com/search?q=wordpress+backup+plugin
https://wordpress.org/plugins/backupwordpress/

tilføjelse af klaase må skulle gøres i WP, er der ikke en insdtilling i Imapper plugin. eller hvordan lavede du de pinde du har på kortet, det må være samme sted som du lavede de pinde, og også skal rette de tekster til de pins.

programmere ikke selv mod WP, men har lidt kendskab til WP

Ja, men problemet i det her plugin er, at det hele er visuelt. Jeg kan åbenbart ikke tilføje klasser til noget. Kan godt putte custom code ind, men det hjælper ikke, når jeg skal rette hvert img...

@Tor -Har prøvet, der kommer desværre ingenting frem...

jeg kan se du har løst det med jQuery

Kode 

<script type="text/javascript">	
jQuery(document).ready(function() {
	jQuery("[id^=imapper1-pin]").addClass('rotate');  
});
</script>

du kunne overveje/bør omskrive coden til dette

<script type="text/javascript">	
(function($) { // scope
$(document).ready(function() {
	$("[id^=imapper1-pin]").addClass("rotate");  // id starter med imapper1-pin
	$("[id$=wrapper]").removeClass("rotate"); // id slutter med wrapper
});
})(jQuery); 
</script>

så $ i (function($) scope tolkes som jQuery
da jeg kan se det er den standart WP selv anvender på deres jQuery code