Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="boardshot_list">
- {% for ... %}
- <span class="img_box">
- <a href="/site_media/xxx" target="_blank">
- <img class="trigger" src="xxx" alt="{{ item.title }}" />
- </a>
- <div class="container_speech_box popup">
- <div class="two">
- <b class="tl"><b class="tr"></b></b>
- <p>
- blabla
- </p>
- <b class="bl"></b><b class="br"><b class="point"></b></b>
- </div>
- </div>
- </span>
- {% endfor %}
- </div>
- div.boardshot_list span.img_box {
- display:block;
- width:220px;
- height:180px;
- float: left;
- margin: 0 10px 10px 0;
- position: relative;
- }
- img.trigger{
- border:1px solid #373743;
- }
- div.popup
- {
- display: none;
- position: absolute;
- z-index: 50;
- }
- /* POPUP rounded box */
- .container_speech_box div:after {content: "."; display: block; height:11px; clear:both; visibility:hidden;}
- .container_speech_box div {width:300px; height:auto; font-family:verdana; font-size:11px;}
- b.tl {display:block; width:300px; height:8px; font-size:1px;}
- b.tr {display:block; width:292px; height:8px; font-size:1px; float:right;}
- b.bl {display:block; width:8px; height:8px; font-size:1px; float:left;}
- b.br {display:block; width:292px; height:8px; font-size:1px; float:right; position:relative;}
- b.point {display:block; font-size:1px; width:25px; height:14px;}
- .container_speech_box div p {padding:8px; margin:0; border:3px solid #4f5b69; border-width:0 3px; text-align:justify;}
- div.two b.tl {background:url(/site_media/images/top_left2.gif) top left no-repeat;}
- div.two b.tr {background:url(/site_media/images/top_right2.gif) top right no-repeat;}
- div.two p {background:#fff;}
- div.two b.bl {background:url(/site_media/images/bottom_left2.gif) top left no-repeat;}
- div.two b.br {background:url(/site_media/images/bottom_right2.gif) top right no-repeat;}
- div.two b.point {background:url(/site_media/images/point2.gif) top left no-repeat; margin:5px 0 0 125px;}
- /* end popup table */
- div.boardshot_list {
- width: 700px;
- clear: left;
- min-height: 80px;
- }
- div.boardshot_list .memo_id {
- padding-left: 10px;
- position: relative;
- float:right;
- color:#60564d;
- font-size: 25px;
- padding-top: 20px;
- width: 50px;
- top: 30px;
- left: 10px;
- font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
- }
- div.boardshot_list.even {
- background-color: #f3f5f6;
- }
- div.boardshot_list .title span{
- color: #bbb;
- font-weight: normal;
- }
- div.boardshot_list .img img {
- border:1px solid #373743;
- }
- <script type="text/javascript">
- $(document).ready(function(){
- $('.img_box').each(function () {
- // options
- var distance = 10;
- var time = 250;
- var hideDelay = 50;
- var hideDelayTimer = null;
- // tracker
- var beingShown = false;
- var shown = false;
- var trigger = $('.trigger', this);
- var popup = $('.popup', this).css('opacity', 0);
- // set the mouseover and mouseout on both element
- $([trigger.get(0), popup.get(0)]).mouseover(function () {
- // stops the hide event if we move from the trigger to the popup element
- if (hideDelayTimer) clearTimeout(hideDelayTimer);
- // don't trigger the animation again if we're being shown, or already visible
- if (beingShown || shown) {
- return;
- } else {
- beingShown = true;
- // reset position of popup box
- popup.css({
- top: -10,
- left: 20,
- display: 'block' // brings the popup back in to view
- })
- // (we're using chaining on the popup) now animate it's opacity and position
- .animate({
- top: '-=' + distance + 'px',
- opacity: 0.9
- }, time, 'swing', function() {
- // once the animation is complete, set the tracker variables
- beingShown = false;
- shown = true;
- });
- }
- }).mouseout(function () {
- // reset the timer if we get fired again - avoids double animations
- if (hideDelayTimer) clearTimeout(hideDelayTimer);
- // store the timer so that it can be cleared in the mouseover if required
- hideDelayTimer = setTimeout(function () {
- hideDelayTimer = null;
- popup.animate({
- opacity: 0
- }, time, 'swing', function () {
- shown = false;
- popup.css('display', 'none');
- });
- }, hideDelay);
- });
- });
- });
- </script>
- // reset position of popup box
- popup.css({
- top: -10,
- left: 20,
- display: 'block' // brings the popup back in to view
- })
- $(this).css('z-index', '1');
Add Comment
Please, Sign In to add comment