#128877 random hover image

Landing Forums JupiterX WordPress Theme random hover image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • zalgritte-83da7914

    I want to have GIFs appear randomly when I mouse over a blog post.

     

    In Attach file, the goal is to have gif appear randomly.

     

    However, it was difficult to control the hover image with the basic elements provided by Jet Elements or Jupiter.

    So I’m thinking about using javascript jquery.
    In the Advanced tab of Posts element, apply the CSS ID and CLASS arbitrarily (ex. hover-ani).
    And the script controls the hover through the ID.

    Below is an incomplete code.

    <hr />

    <div>
    <div>const ImageURLs = [</div>
    <div>”https://media.giphy.com/media/tJ1jipvvMs4r7xuZnI/giphy.gif&#8221;,</div>
    <div>”https://media.giphy.com/media/XFpIo4jKuUrjQHYHeq/giphy.gif&#8221;,</div>
    <div>”https://media.giphy.com/media/uxunn6z4qKrGsND3II/giphy.gif&#8221;,</div>
    <div>”https://media.giphy.com/media/XxRl7rbKSFvXEFoNzv/giphy.gif”</div&gt;
    <div>]; //sources are examples.</div>
    <div></div>
    <div>function getRdHoverAni() {</div>
    <div>  const index = Math.floor(Math.random() * ImageURLs.length);</div>
    <div>  return ImageURLs[index];</div>
    <div>}</div>
    <div>$(“#hover-ani”).hover(</div>
    <div>  function() {</div>
    <div>    const image = getRdHoverAni();</div>
    <div>    $(“#hover-ani”).find(‘img’).before($(‘‘, {id:’hoverGif’, src:image, position:’absolute’, ‘z-index’:9}))</div>
    <div>    console.log(“add”);</div>
    <div>  },</div>
    <div>  function(){</div>
    <div>    $(“#hover-ani”).find(‘img’).remove(“#hoverGif”);</div>
    <div>    console.log(“remove”);</div>
    <div>  }</div>
    <div>);</div>
    </div>

    <hr />

    I’d appreciate it if you could let me know if there’s another way.

     

    Alexander Hutsol Support Team

    Hello,

     

    There is no such option in Jupiter X and JetElements, but you can try a workaround as described here:

    https://stackoverflow.com/questions/51852037/show-random-image-on-hover

    Also such query requires additional customization and I recommend you to create a project to WPDone team https://wpdone.artbees.net/estimate-a-project/ .

    Thank you for understanding.

     

    Regards.

    zalgritte-83da7914

    Thanks to answer.

    I tried it based on what you told me.
    However, it is applied when editing but not when it is updated and published.
    Also, there is a problem that it should be applied only to the div with the mouseover, but it applies to all the divs with the same ID at the same time.

    I’ll look into it more, but I think I’ll have to make another choice.

    Thank you again.

    Nodari Support Team

    Thank you for understanding 🙂

    Have a great day and let us know if anything is needed from our side

    Best wishes

Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.
Login