lundi 24 octobre 2016

How to get my thumbnails to display in random positions (of its archive page)

I have registered a custom post type in my theme (no plugins) in my functions.php wordpress file like this:

add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'Works',
array(
  'labels' => array(
    'name' => __( 'Works' ),
    'singular_name' => __( 'Work' )
  ),
'public' => true,
'description' => ('Work'),
'has_archive' => true,
'taxonomies' => array('category'),
'supports' => array( 'title', 'editor', 'thumbnail')
)
);
}

I have then created an "archive-works.php" where I am only showing this custom post-type. And there I am merely showing the thumbnails and the title when you hover. Those thumbnails are links (there is a "a" tag around the "img"). And they are being styled like this:

#content img {
width: 70%;
height: auto;
}

Meanwhile I have wrapped a ".js-container" class around all links.

<div class="js-container">
<a href="http://ift.tt/2egifPp" title="Work 3">
    <img width="960" height="630" src="http://ift.tt/2dChz93" 
class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
alt="10476558_10152767209223872_3064425635001081899_o" 
srcset="http://ift.tt/2dChz93 960w, http://ift.tt/2egi3iW 300w, http://ift.tt/2dCkONX 768w" 
sizes="(max-width: 960px) 100vw, 960px">
</a>
</div>

I want the images to deviate ever so slightly from their natural positions. I mean, I need to place them randomly position-wise (more on the left or on the right, and if possible slightly above or below of where they should be. I was doing a bit of research and I have found this example: Positioning images in random places

I know it is a combination of javascript and css as in the example above. This is my current stage: http://ift.tt/2dCivKL I have tried typing this on the header.php file but with no results:

<script type="text/javascript">
$('.js-container a img').each(function() { 
var top = Math.floor(Math.random() * 400), left = Math.floor(Math.random() * 400);
$(this).css({
"top": top, 
"left": left, 
"position":"absolute", 
"display":"inline-block"
}); 
});
</script> 

Can someone help me out here? Many thanks.




Aucun commentaire:

Enregistrer un commentaire