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