I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue.
My goal is to have the images load in random positions and then make them draggable using Dragabilly.
However, sometimes all the images end up clustered in the top corner without their positions being properly defined. Despite this, dragging functionality still works. I suspect that this could be due to the images not fully loading before running the script, but I'm uncertain.
You can view my live site here
Here's the code snippet I'm currently using...
$ ->
$('#menu-button').on 'click', ->
$('#menu').toggleClass 'closed'
return
if $(window).width() > 960
$img = $ '.work-imgs img'
wdoh = $('.work-desc').outerHeight()
wl = ($(window).width() - 384) / $img.length
wh = $(window).height() - wdoh
$.each _.shuffle($img), (i, e) ->
e.onload = ->
rm = wh - $(e).height()
$(e).css
'left': i * wl + (Math.random() - .75) * 96
'top': wdoh + Math.random() * rm
return
return
$d = $img.draggabilly()
$d.on 'pointerDown', ->
$d.css 'z-index', 0
$(this).css 'z-index', 1
return
return