Docs

[Studio172]

Hello, I have a question about highlighting a chosen image.
If I hover over the photographs of the people at:
http://frank.pilihan.nl/#wie
I get a blue line, i wish also to have a blue line when an image was clicked/selected.

I have this css on the images:

mw img:focus{
outline: 4px solid #04508c;
}
mw img:active{
outline: 4px solid #04508c;
}
mw img:hover {
outline:4px solid #04508c;
}

Only the hover seems to work… Or do I do something completely wrong with my css?

[Rad]

Hi there,

Thanks for posting in.

It’s not applicable for images since it doesn’t have focus styling like links and form inputs. Those are just images 🙂

Instead, please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($){

$( '.home #wie .x-container:last-child img' ).on('click', function(){

$(this).parent().parent().find('img').removeClass('active_img');
$(this).addClass('active_img');

} );

} );

Then add this CSS

.active_img {
outline:4px solid #04508c;
}

Hope this helps.

[Studio172]

Hello Rad, thanks for your quick answer!
And sorry for my poor CSS knowledge… have to learn more about CSS…

I added your scripts, but it doesn’t seem to do the trick… Can you explain what you are trying to do with the .active_img class. Is this a x theme class?

greetings, Stefan

[Rupok]

Hi Stefan,

I have tested the code and it should work fine as it’s working through console. I can see you have some other scripts above this and one of them are not closed properly. You can take off them to to test the code. You can also place the code within page level CSS under Cornerstone Settings Tab > Custom if you need the code only for the page.

Cheers!

[Studio172]

Hello Rupok,
Thanks for looking into this issue!
But if I add some alert feedback:

jQuery( function($){
window.alert(“hello”);
$( ‘.home #wie .x-container:last-child img’ ).on(‘click’, function(){
window.alert(“hello2”);

$(this).parent().parent().find(‘img’).removeClass(‘active_img’);
$(this).addClass(‘active_img’);

} );

} );

I get to see the ‘hello’ alert, but the ‘hello2’ alert never happens even if I click on the images…

greetings, stefan

[Jade]

Hi Stefan,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Studio172]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. The JS code should be updated and make use of this code instead:

jQuery( function($){
  $(window).load(function(){
    window.alert("hello");
    $( '#medewerkersfotoveld img' ).each(function(){
      $(this).on('click', function(){
        window.alert("hello2");
        $(this).parent().parent().find('img').removeClass('active_img');
        $(this).addClass('active_img');
      });
    });
  });
});

If you need anything else, please let us know.

[Studio172]

Hello Rue, thanks for your solution!

I’m still having some problems with synchronizing stuff, as I generate the images on the page with php/ajax, the script above is triggered too soon (before the images are on the page).

I realize this is far beyond the scope of your theme, so I understand if you don’t have the time to answer my question…

Can you perhaps give me a clue how i can trigger this script from my ajax call:

function maakmedewerkersfotos() {
var veld = document.getElementById(“medewerkersfotoveld”);

$.ajax({
url: ‘/wp-admin/admin-ajax.php’,
method: ‘POST’,
dataType: ‘html’,
data: {
action: ‘medewerkersfotos’
},
success: function(data) {
//window.alert(data);
veld.innerHTML = data;
selecteermedewerker(STARTMEDEWERKERDICKSLUIS);

//HERE I WOULD LIKE TO TRIGGER THE SCRIPT

}
});
}

[Studio172]

NEVER MIND!
Already found the solution!!!

with $(window).ajaxSuccess

Thanks for all your help!

[Paul R]

You’re welcome! 🙂

[Author]

Posts