vendredi 27 septembre 2019

random images without repeat on click

Currently I'm working on this website and I made a random image pop up on click, but my client feels like sometimes one image keep repeating too many times so they asked me to make the it random but without repetition.

This is the website link: http://fullbleed.life/about/ (the PAST WORK section is where it should work)

Thank you!

imageString = [
  'http://fullbleed.life/wp-content/uploads/1.png',
  'http://fullbleed.life/wp-content/uploads/2.png',
  'http://fullbleed.life/wp-content/uploads/3.png',
  'http://fullbleed.life/wp-content/uploads/4.png',
  'http://fullbleed.life/wp-content/uploads/5.png',
  'http://fullbleed.life/wp-content/uploads/6.png',
  'http://fullbleed.life/wp-content/uploads/7.png',
  'http://fullbleed.life/wp-content/uploads/8.png',
  'http://fullbleed.life/wp-content/uploads/9.png',
  'http://fullbleed.life/wp-content/uploads/10.png',
]

name = [
  'Nordstrom',
  'Pylon',
  'ASP & Hand',
  'faris',
  'ARA',
  'traceme',
  'Microsoft',
  'Kozha Numbers',
  'Van Der Pop',
  'YFF',
]

function getRandom() {
  var min = 0
  var max = 10
  return Math.floor(Math.random() * max)
}

$('.past-work').bind('click', function(event) {

  var randNum = getRandom()
  var aProduct = document.getElementById('rand-images')
  var image = document.createElement('img')
  image.src = imageString[randNum]
  image.style.display = 'block'
  image.style.position = 'absolute'
  image.style.left = event.clientX - 280 + 'px'
  image.style.top = event.clientY - 280 + 'px'
  aProduct.appendChild(image)

  $(image).draggable()
      event.preventDefault()
})
<body><div class="row">
        <div class="col-md-12 past-work">
                <h1>PAST WORK</h1>
                <h4>(CLICK ANYWHERE, CLICK ANYWHERE AGAIN)</a></h4>
                <div class="picture">
                <div id="rand-images">
                </div>
        </div>
        </div>
        
        
</div>
</body>



Aucun commentaire:

Enregistrer un commentaire