Load an image when mouseover on its link

Go down

Solved Load an image when mouseover on its link

Post by SarkZKalie on May 24th 2018, 9:17 am

Hello guys

I can't explain clearly what I mean but please visit this site.
Okay, you're in now mouseover on a link https://i.imgur.com/6OiOTQK.gif - you see it? Very Happy

I'm asking for help to make a script that can let user to view an image from a link without using BBCode or HTML.
Code:
Filter :
Any file type should work : *.jpg, *.png, *.gif (can add more if possible)
Any image hosting should work : *imgur.com, *servimg.com, *tinypic.com, *postimages.org (only direct link supported)
Images won't load till user mouseover on its link, except image links already inside a BBCode or HTML tag.

Code:
Accepted : http://i.imgur.com/6OiOTQK.gif

Script won't work if meet conditions below
Code:
Unaccepted :
[img]http://i.imgur.com/6OiOTQK.gif[/img] or
<img src="http://i.imgur.com/6OiOTQK.gif" />

Thank you for reading.


Last edited by SarkZKalie on May 26th 2018, 7:28 am; edited 1 time in total
avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 940
Reputation : 157
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved Re: Load an image when mouseover on its link

Post by alla13 on May 24th 2018, 12:30 pm

i think you want a tooltip on img link but
instead of a text you want the image to be loaded
like this gif

if so i am so interested in this
i hope someone code it for you
avatar
alla13
Forumember

Posts : 91
Reputation : 6
Language : Arab5/5 Eng3/5 Fr2/5

http://alla-omar.forumotion.com

Back to top Go down

Solved Re: Load an image when mouseover on its link

Post by ahmdsat on May 24th 2018, 1:24 pm

i am so interested in this
avatar
ahmdsat
New Member

Posts : 23
Reputation : 2
Language : عربي

http://puph.yoo7.com

Back to top Go down

Solved Re: Load an image when mouseover on its link

Post by Wecoc on May 24th 2018, 8:55 pm

Check this javascript.

Code:
/* Image Tooltip v1.0 (punBB) */
 
$(function() {
  $('.post-entry a').filter(function(){
    this.addEventListener("mouseover", function(){ createImageTooltip(this) });
    this.addEventListener("mouseout", function(){ removeImageTooltip() });
  });
  $('head').append('<style type="text/css">' +
      '.postimage-tooltip {' +
        'border: solid 2px #536482;' +
        'z-index: 999;' +
      '}' +
      '.postimage-tooltip img {' +
        'border: solid 1px #ffffff;' +
      '}' +
  '</style>');
});
 
function createImageTooltip(data){
  if (/.(png|jpg|gif)$/.test(data.href) && (!/<img/.test(data.innerHTML))){
    var max_width = 192; // Set here the tooltip max width
    var tooltip = $('<div class="postimage-tooltip"><img src="' + data.href +
                    '" style="max-width:' + max_width + 'px" /></div>')[0];
    var offset = $(data).offset();
    $(tooltip).css({
      position: 'absolute',
      display: 'inline-block'
    });
    data.before(tooltip);
    $('.postimage-tooltip').filter(function(){
      $(this).css ({ transform: 'translateY(-' + (this.offsetHeight + 8) + 'px)' });
    });
  }
}
 
function removeImageTooltip(){
  $('.postimage-tooltip').filter(function(){
    this.remove();
  });
}

Title: Image Tooltip
Placement: In all the pages


Last edited by Wecoc on May 25th 2018, 8:01 pm; edited 1 time in total
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Solved Re: Load an image when mouseover on its link

Post by SarkZKalie on May 25th 2018, 8:14 am

Thank you so much, Wecoc! But there was a problem appear when I was trying hover on an image link, seem it related to position:absolute and top value.

Here is the link

avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 940
Reputation : 157
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved Re: Load an image when mouseover on its link

Post by SLGray on May 25th 2018, 8:16 am

Please post a link to a post that contains this and that guests can see.



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
avatar
SLGray
Administrator
Administrator

Male Posts : 44345
Reputation : 3144
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Solved Re: Load an image when mouseover on its link

Post by Wecoc on May 25th 2018, 3:44 pm

Try this instead. I tested in your forum console and it seems to be working.

Code:
/* Image Tooltip v1.0 (Edit) */

$(function() {
  $('.vglnk').filter(function(){
    this.addEventListener("mouseover", function(){ createImageTooltip(this) });
    this.addEventListener("mouseout", function(){ removeImageTooltip() });
  });
  $('head').append('<style type="text/css">' +
      '.postimage-tooltip {' +
        'border: solid 2px #536482;' +
        'z-index: 999;' +
      '}' +
      '.postimage-tooltip img {' +
        'border: solid 1px #ffffff;' +
      '}' +
  '</style>');
});
 
function createImageTooltip(data){
  if (/.(png|jpg|gif)$/.test(data.href) && (!/<img/.test(data.innerHTML))){
    var max_width = 192; // Set here the tooltip max width
    var tooltip = $('<div class="postimage-tooltip"><img src="' + data.href +
                    '" style="max-width:' + max_width + 'px" /></div>')[0];
    var offset = $(data).offset();
    $(tooltip).css({
      position: 'absolute',
      display: 'inline-block'
    });
    data.before(tooltip);
    $('.postimage-tooltip').filter(function(){
      $(this).css ({ transform: 'translateY(-' + (this.offsetHeight + 8) + 'px)' });
    });
  }
}
 
function removeImageTooltip(){
  $('.postimage-tooltip').filter(function(){
    this.remove();
  });
}

I only changed
Code:
$('.post-entry a')
to
Code:
$('.vglnk')

To use this code in other versions (phpBB2, etc) probably the only thing you have to change is that same thing.
Also you can change the max width of the tooltip in this line
Code:
var max_width = 192;

The height is changed automatically to preserve the ratio.
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Solved Re: Load an image when mouseover on its link

Post by SarkZKalie on May 26th 2018, 7:28 am

You've made my day!
Thank you @Wecoc


avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 940
Reputation : 157
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved Re: Load an image when mouseover on its link

Post by APE on May 26th 2018, 5:22 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules



avatar
APE
Administrator
Administrator

Male Posts : 13102
Reputation : 1387
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum