Question

我正在使用jQuery卷轴来显示建筑并旋转它。我已经能够在链接上显示工具提示，但我想在鼠标悬停时显示一个信息窗口，以显示图像和文本的详细信息（表格可能是）。这是我到目前为止所做的。

＆＃13;

$(document).ready(function()
{
  $("#TNO3503Div").tooltip({ effect: 'slide'});

  $('#image')
  .reel({
    images:      'http://rishad.me.uk/reel/TimesHouse/###.png',
    frames:      23,
    annotations:
    {
      "TNO3503":
      {
        link: 
        {
          text: "Location", href:'#', class: "mytooltip", 
          title: 'This is the info window where I want to put some details and images.',
        },
        x: 20,
        y: 190
      }
    }
  })
});

＆＃13;

.mytooltip{
  display: inline;
  position: relative;
  font-size:18px;
  color:#fff;
}

.mytooltip:hover:after{
  background: #333;
  background: rgba(0,0,0,.4);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 20px 20px;
  position: absolute;
  z-index: 98;
  width: 140px;
  height: 110px;
  display:inline; 
  position:absolute;
}

.mytooltip:hover:before{
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  color: #fff;
  position: absolute;
  z-index: 99;
} 

/* trigger button */
#TNO3503Div {
  background:transparent url(http://jquerytools.github.io/media/img/downloadnow.png) no-repeat scroll 0 0;
  display:block;
  height:44px;
  margin: 0 auto;
  margin-bottom:30px;
  overflow:hidden;
  text-indent:-999em;
  width:159px;
  cursor:pointer;
}

/* mouseover state */
#TNO3503Div:hover {
  background-position:0 -44px;
}

/* clicked state */
#TNO3503Div:focus {
  background-position:0 -88px;
}

/* tooltip styling */
.tooltip {
  display:none;
  background:url(http://jquerytools.github.io/media/img/tooltip/black_arrow_big.png);
  height:163px;
  padding:40px 30px 10px 30px;
  width:310px;
  font-size:11px;
  color:#fff;
}

/* a .label element inside tooltip */
.tooltip .label {
  color:yellow;
  width:35px;
}

.tooltip a {
  color:#ad1;
  font-size:11px;
  font-weight:bold;
}

＆＃13;

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<script src="http://code.vostrel.cz/jquery.reel.js"></script>

<img id="image" src="http://rishad.me.uk/reel/TimesHouse/001.png" width="500" height="250" />
<br>
<div id="TNO3503Div">Download now</div>
<div class="tooltip">
  <table style="margin:0">
    <tr>
      <td class="label">Row1</td>
      <td>Row 1 column 2</td>
    </tr>
    <tr>
      <td class="label">Row2</td>
      <td>Row 2 Column 2</td>
    </tr>
    <tr>
      <td class="label">Row3</td>
      <td>Row 3 Column 3</td>
    </tr>
    <tr>
      <td class="label">Row4</td>
      <td>Row 4 Column 4</td>
    </tr>
  </table>

</div>

＆＃13;

Answer 1

你需要3件事：

使用jquery ui创建工具提示（如果您愿意，可以使用自己的标准工具提示css覆盖）
用于添加额外文本和图像的jQuery脚本
注释

（在你的例子中你也错过了这个类=“卷轴”）

        $(function(){ // when DOM ready
            return;
            $('#image').reel({
                stitched:    1500,
                orientable:  true
            });
        });
        //2. The script to add text and image to a tooltip
        $(function() {
            $( document ).tooltip({
                items: "[title]",
                content: function() {
                    var element = $(this);
                    if (element.is("[title]")) {
                        return "<div><h5>example text</h5><img class='photo' src='http://www.newhdwallpapers.in/wp-content/uploads/2012/12/Architectural-3D-Building.jpg'></div>";
                    }
                }})
        });

        .photo {
            width: 150px;
            height: 150px;
            text-align: center;
        }

<html>
<head>
    <title>Reel demo</title>
    <!--1. CSS for jquery tooltip-->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
    <script src="http://code.vostrel.cz/jquery.reel.js" type="text/javascript"></script>
    <!--1. script for jquery tooltip-->
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    

    <!--3. Add an anotation to the picture like this :-->
    <a class="reel-annotation"
       href="#"
       data-x="160"
       data-y="86"
       data-for="image" title="extra text">
        Example anotation
    </a>


</head>
<body>

<img src="http://www.newhdwallpapers.in/wp-content/uploads/2012/12/Architectural-3D-Building.jpg" width="590" height="590"
     class="reel"
     id="image"
     data-image="http://www.newhdwallpapers.in/wp-content/uploads/2012/12/Architectural-3D-Building.jpg"
     data-stitched="1652"
     data-orientable="true">

</body>
</html>

jQuery卷轴图像中的信息窗口

1 个答案: