Commit 2bf7176e authored by xishifeng's avatar xishifeng

图片旋转

parent 4a254d6a
......@@ -2,4 +2,5 @@
composer.lock
*.log
/nbproject/private/
runtime/*
\ No newline at end of file
runtime/*
/public/resource/xishifeng*.php
\ No newline at end of file
......@@ -91,7 +91,6 @@ define(['doT', 'text!temp/remark_follow_template_tpl.html', 'css!style/home.css'
},
event: function() {
var _doc = $(document);
$('.J_preview').preview();//预览图片
//约带看列表 点击新增商铺
var _iYJAAObj = $('.detail-modal-bargaininfo-commission-addarea');
_doc.on('click', '#bargaininfo_commission_add_btn>img', function(e) {
......
......@@ -83,7 +83,6 @@ define(['doT', 'text!temp/callPhone_template_tpl.html', 'css!style/home.css', 'c
},
event: function() {
var _doc = $(document);
$('.J_preview').preview();//预览图片
//约带看列表 点击新增商铺
var _iYJAAObj = $('.detail-modal-bargaininfo-commission-addarea');
_doc.on('click', '#bargaininfo_commission_add_btn>img', function(e) {
......
......@@ -44,7 +44,6 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css
event: function() {
var _doc = $(document);
var _imgUploadLunbo = $('#xiangqing_pic_ul'); //详情页轮播图ul
$('.J_preview').preview();//放大收款图片
//时间轴点击出现
_doc.on('click', 'a[href="#modal-time"]', function(e) {
follow.house_id = $(this).attr("data-id");
......@@ -298,8 +297,6 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css
'1': data.data[i].img_name?urlDeal(data.data[i].img_name):data.data[i].img_name
}));
};
$('.J_preview').preview();//放大图片
} else {}
}
......
......@@ -49,7 +49,6 @@ define(['doT', 'text!temp/house_template_tpl.html', 'css!style/home.css', 'ckfin
business.getDistrict();
$("body").append(template);
$('.J_preview').preview();//放大收款图片
function  getPreMonth(date)  {            
var  arr  =  date.split('-');            
var  year  =  arr[0];             
......@@ -806,7 +805,6 @@ define(['doT', 'text!temp/house_template_tpl.html', 'css!style/home.css', 'ckfin
img_url += '<img src="' + local_img + '" data-bimg="' + local_img + '" class="jai_dujia diagram-image J_preview" data-img="' + item.img_name + '" >';
});
$("#liudan_pic_pre").html(img_url);
$('.J_preview').preview();//放大图片
if(check_auth('index/editExclusive')) {
$('.is_dujia').find('input').removeAttr("readonly");
$('.is_dujia_select').find('select').removeAttr("disabled");
......
......@@ -21,6 +21,7 @@ require.config ({
'paginationStart': 'lib/js/zw.pagination',
'checkLogin': 'lib/js/checkLoginFailureAjax',
'blow-up': 'lib/js/blow-up',
'photo-gallery': 'lib/js/jquery-photo-gallery/jquery.photo.gallery',
},
'shim': {
......@@ -61,6 +62,10 @@ require.config ({
'validate': {
'deps': ['jquery'],
'exports': 'validate'
},
'photo-gallery': {
'deps': ['jquery'],
'exports': 'photo-gallery'
}
},
......@@ -73,4 +78,4 @@ require.config ({
}
});
require (['require', 'jquery', 'doT','layer', 'app/public' ,"datetimepicker",'bootstrapJs','pagination','paginationStart','checkLogin']);
require (['require', 'jquery', 'doT','layer', "datetimepicker",'bootstrapJs','pagination','paginationStart','checkLogin','photo-gallery','app/public']);
......@@ -215,7 +215,6 @@ define(['doT', 'css!style/home.css', 'ckfinder', 'ckfinderStart', "datetimepick
/*分页代码*/
add_page(data.data.total,pageNo,follow.pageSize,follow.getList);
$('.J_preview').preview();
}
}(0);
......
......@@ -77,7 +77,6 @@ define(['doT', 'text!temp/my_collection_user_template_tpl.html', 'css!style/home
},
event: function() {
var _doc = $(document);
$('.J_preview').preview();//预览图片
//约带看列表 点击新增商铺
var _iYJAAObj = $('.detail-modal-bargaininfo-commission-addarea');
_doc.on('click', '#bargaininfo_commission_add_btn>img', function(e) {
......
......@@ -173,12 +173,18 @@ define(['doT', 'jquery', 'text!temp/menu_template_tpl.html', 'layer'], function
location.href = location.href.replace('http','https');
};
//时间轴iframe弹出框,点击看大图效果
$(document).on('click', '#preview_big_img_div', function(e){
//时间轴iframe弹出框,点击看大图效果,关闭事件
_doc.on('click', '#preview_big_img_div', function(e){
e.preventDefault();
e.stopPropagation();
$(this).remove();
});
_doc.on('click', '.J_preview', function(e){
e.preventDefault();
e.stopPropagation();
$.openPhotoGallery(this);
});
});
var ServerHost = location.origin;
var ServerHostTempC = 'https://pre2.tonglianjituan.com';
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片查看器</title>
<link rel="stylesheet" href="photoGallery.css"/>
<script src="jquery.js"></script>
<script src="jquery.photo.gallery.js"></script>
</head>
<body>
<div class="box">
<header drag>
<div class="winControl" noDrag>
<span class="closeWin" title="关闭"><i class="icon_close-big"></i></span>
</div>
</header>
<div class="gallery"></div>
</div>
<script>
$.initGallery();
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
html, body, div, span{
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
body, html, .box {
height: 100%;
width: 100%;
}
body {
font: 400 16px/24px "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
letter-spacing: 0.01em;
cursor: default;
-webkit-user-select: none;
-webkit-font-smoothing: antialiased;
}
.box {
position: relative;
overflow: hidden;
}
header{
position: absolute;
height: 30px;
width: 100%;
}
.winControl {
position: absolute;
right: 0;
top: 0;
z-index: 99999;
}
.winControl span {
display: inline-block;
padding: 4px 6px;
cursor: pointer;
line-height: 10px;
}
.winControl span:hover {
background: #E82B45;
}
[drag] {
-webkit-app-region: drag;
}
[noDrag] {
-webkit-app-region: no-drag;
}
i{
position: relative;
z-index:99999;
display: inline-block;
}
.icon_close-big{
width: 18px;
height: 18px;
background-image: url('icon/close_big.png');
}
.icon_close-small{
width: 13px;
height: 13px;
background-image: url('icon/close_small.png');
display: inline-block;
}
.icon_tool-fullscreen{
width: 18px;
height: 18px;
background-image: url('icon/full_screen.png');
}
.icon_tool-bigger{
width: 20px;
height: 19px;
background-image: url('icon/bigger.png');
}
.icon_tool-smaller{
width: 20px;
height: 19px;
background-image: url('icon/smaller.png');
}
.icon_tool-rotate{
width: 17px;
height: 20px;
background-image: url('icon/rotate.png');
}
.icon_tool-download{
width: 16px;
height: 20px;
background-image: url('icon/download.png');
}
.icon_tool-prev{
width: 22px;
height: 38px;
background-image: url('icon/prev.png');
}
.icon_tool-next{
width: 22px;
height: 38px;
background-image: url('icon/next.png');
}
/* 效果 */
.rotate0{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.rotate90{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.rotate180{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.rotate270{
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}
.gallery{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.gallery .image{
position: absolute;
margin:0; /*之所以不使用auto直接垂直居中,是因为当图片旋转时left值会很难计算*/
padding:0;
z-index: 999;
display: none;
}
.gallery .image.active{
display:block;
}
.gallery .tool{
position: absolute;
bottom: 40px;
width: 100%;
text-align: center;
display: none;
z-index: 99999;
}
.gallery .toolct{
display: inline-block;
height: 30px;
background-color: #6f6965;
padding: 5px 14px;
box-sizing: border-box;
border-radius: 6px;
}
.gallery .toolct span{
margin-right: 20px;
}
.gallery .toolct i{
display: inline-block;
cursor: pointer;
}
.gallery .percentTip{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 100px;
height: 30px;
z-index: 9999;
text-align: center;
line-height: 30px;
font-size: 16px;
border-radius: 8px;
color: #ffffff;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4F504E',endColorStr='#151313',gradientType='1');
background: linear-gradient(315deg, #4F504E, #151313);
background: -moz-linear-gradient(315deg, #4F504E, #151313);
background: -o-linear-gradient(left,#4F504E, #151313);
background: -webkit-gradient(linear,100% 0%, 100% 0%, from(#4F504E), to(#151313));
}
.gallery .thumbnails{
position: absolute;
right: 1px;
bottom: 1px;
border: 1px solid #ffffff;
z-index: 99999;
border-radius: 5px;
background-color: rgba(177, 177, 177, 0.5);
display: none;
}
.gallery .thumbnails .thumbDrag{
position: absolute;
top: 0;
bottom: 0;
width: 100px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
.gallery .thumbnails .thumbDrag span{
width:100%;
height:100%;
border: 1px solid white;
display: block;
box-sizing: border-box;
}
.gallery .thumbnails .thumbClose{
position: absolute;
right: 1px;
top: -2px;
cursor: pointer;
height: 13px;
}
.gallery .thumbnails img{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.gallery .oper{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
z-index: 99999;
}
.gallery .oper i{
display: none;
cursor: pointer;
}
.gallery .oper span{
width: 22px;
height: 38px;
}
.gallery .oper .prev{
float:left;
margin-left: 9px;
}
.gallery .oper .next{
float:right;
margin-right: 9px;
}
.gallery .oper .prev.active i, .gallery .oper .next.active i{
display: inline-block;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment