one image can “preview” multiple images

  • callcallyummy

    (@callcallyummy)


    5 years ago

    Hi,
    I would like to insert multiple images link to one image and these images can be previewed.
    “Image-Maps” can choose multiple area with any shape to link to image, but the image link will create a new window. I have no idea how to preview.
    “MobileFish” is similar to Image-Maps ,but I also do not know how to let the image link
    be previewed
    “Draw Attention” plugin has the feature I want, but it seems I can’t fulfill with the free version.
    I use the Flatsome theme. I have not find the feature in UX builder.
    Is there any free tool to insert multiple images link in one image and these images can be previewed?
    thanks.

    • This topic was modified 5 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    What do you mean by “preview”? Please describe the intended user experience in detail. It sounds like you’ve already done some searching for plugin solutions. A custom coded solution is likely possible. Is that something you would consider? If anyone has a suggestion for an existing plugin, they are free to jump in here.

    Thread Starter callcallyummy

    (@callcallyummy)

    thanks for your reply.
    My requirement as below:
    1.a image has more than one part can be clickable to link to other image link.
    2.I can use any kind of shape to cover the part of image which can be linked to other image link.
    the above requirement can be fulfilled by “Image-Map”
    3.as I click the image where be set as clickable. It will jump a image on the same page (web page preview) not create another new window for image link.
    the above requirement I find Draw attention can make it as the below link, but it the “pro version”. It’s not for free
    https://wpdrawattention.com/document/create-your-first-draw-attention-image/

    Is there any way I can make the above 3 item?

    Moderator bcworkz

    (@bcworkz)

    So the preview image shows up in modal on the page similar to how Lightbox etc. work? You can target a mapped area click event with JS/jQuery just as you would other HTML elements. You still must provide a link for the mapped area, but following the link can be suppressed by script. Instead of following the link the script displays modal content. Ideally you would preload the images so they can be displayed instantly. Fetching images from the server is possible, but there is a noticeable delay.

    For example, you can use Fancybox code, but target the “area” element instead of the “a” link element.

    Thread Starter callcallyummy

    (@callcallyummy)

    Thanks for your advise.
    I use “Image Map” to let the “area” of the picture A link to picture B. “Image Map” would generate code. I got the coordinate from the code, and past to the code as below.


    <map name=”test”>
    <area shape=”rect” coords=”49,33,161,62″ href=”//live.staticflickr.com/65535/49633305472_ddbb46333e_c.jpg” rel=”lightbox” alt=””>
    </map>

    I thought rel=”lightbox” just the key to let picture showed up as preview without creating a new window, but it still created a new window to show the picture.
    Could I consult you what is the problem with the code?

    Moderator bcworkz

    (@bcworkz)

    The script that runs on the click event needs to call event.preventDefault().

    Edited, typed the wrong function at first ^^^

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘one image can “preview” multiple images’ is closed to new replies.