q提示2和图像 [英] qTip 2 and Images

问题描述

我正在使用qTip 2在悬停时显示更大的图像，它半工作。图像显示但不是全宽。如何让它显示全宽？

I am using qTip 2 to display a larger image on hover and it semi works. The image shows but not the full width. How do I get it to show full width?

代码：

HTML

<img src="img.jpg" usemap="#Map" class="center" style="width:900px;" 
border="0" />
<map name="Map" id="Map">
  <area class="1" shape="rect" coords="4,3,225,150" />
</map>

JS

var $j = jQuery.noConflict();
$j('.1').qtip({
   content: '<img src="img1.jpg" width="600"  />',
position: {
  my: 'left top', 
  at: 'right top', 
  target: $j('.1') 
  },
  style: {
  classes: 
  'ui-tooltip-tipsy'
}
});

我该怎么做才能让图像显示全宽？

What should I do to get the image to show full width?

我尝试添加此代码并且无效：

I tried adding this code and it did not work:

          tip: {
        width: 600
    }

推荐答案

你只需要更改css文件的 max-width ：

you only have to change the max-width of your css file:

.ui-tooltip, .qtip{
    max-width: 900px; /* Change this? */
}

在 jsfiddle

<p>
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=1" data-pic="http://www.dummyimage.com/600x600/4c6aff/000000.png&text=1">
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=2" data-pic="http://www.dummyimage.com/300x300/4c6aff/000000.png&text=2">
    <img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=3" data-pic="http://www.dummyimage.com/150x150/4c6aff/000000.png&text=3">
</p>

JAVASCRIPT

JAVASCRIPT

$(function() {
    $("img").each(function() {
        $(this).qtip({
            content: {
                text: function(api) {
                    return "<img src='" + $(this).attr("data-pic") + "' class='dit'>";
                }
            }
        });
    });
});​

CSS

CSS

p {
    margin-top: 50px;
    margin-left: 100px;
}
img {
    padding: 10px;
}
.ui-tooltip, .qtip{
    max-width: 10000px; /* Change this? */
}

这篇关于q提示2和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！