Code Xem trước sản phẩm cho web thường

Đây là code tooltip do mình tự viết và sử dụng ứng dụng của jqueryUI .

Mình nghĩ code này không vi phạm đến bản quyền của webmienphi vì đây là code mình tự nghĩ và tooltip của webmienphi với tooltip của mình hoạt động và cấu tạo hoàn toàn khác nhau , và mình chỉ chia sẻ sản phẩm mình làm được . Và Nếu Có vi phạm thì mong admin bỏ qua và xóa dùm bài viết

1. Tool tip gói pro của webmienphi :

Các bạn có thể thấy rất nhiều website xài tooltip này , mình sẽ lấy ví dụ 1 website trả phí

http://shopxitin.net/

ảnh  :

2. Tooltip mình tự chế , dành cho những website dạng thường , chưa đủ điều kiện về tài chính để nâng cấp lên pro , đây là code của mình .

ảnh :

Đối với các web bán hàng , để có thể hiển thị được nhiều sản phẩm trong 1 trang web người ta thường phải sử dụng kích thước ảnh dạng nhỏ để hiển thị được nhiểu . Nhưng kích thước quá bé sẽ gây khó chịu với khách hàng , việc xem nhanh sản phẩm khi di chuột vào mẫu sản phẩm là rất cần thiêt , khách hàng có thể nhìn sản phẩm 1 cách rõ ràng hơn , nhanh hơn thay vì phải click vào cái nút xem chi tiết .

Đối với các bạn chưa có đủ tài chính để sử dụng web trả phí và dùng ứng dụng này , các bạn có thể xài code của mình , nó sẽ giúp các bạn tăng hiệu quả trong việc kinh doanh , để khi có đủ tiền rồi các bạn có thể bỏ code này đi , bỏ tiền ra trả phí cho website của mình để sử dụng nhiều ứng dụng hơn nữa :D . 

Về code thì tùy website , mỗi website cần 1 code khác nhau vì cấu tạo khác nhau . Hiện tại mình vẫn chưa tìm được làm thế nào để hiển thị ra 1 code thống nhất . Vì thế , bạn nào cần code thì vui lòng ghi link website của bạn vào ô bình luận phía dưới và gửi cho mình , mình sẽ cung cấp 1 code phù hợp nhất cho website của bạn :D

bạn giúp đỡ cho minh với, mình cũng đang tìm kiếm 1 code tương tự

http://nhuasari.webmienphi.in/

Cảm ơn bạn đã quan tâm đến bài viết của mình .

Bình thường , chỉ có giao diện trả phí mới có thể áp dụng . Hôm nay mình sẽ đưa code để phù hợp với giao diện miễn phí của bạn :

Trong trang quản lý website , trên thanh menu ,

Bạn chọn CHỨC NĂNG KHÁC => MÃ HTML , META , chèn vào đầu đoạn code sau :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$("a[id*='product_wrap']").tooltip({

content: function(){return $(this).html().replace('100_','')},
track: true,
});
});
</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

lưu ý là code trên chỉ phù hợp với giao diện của bạn và 1 vài trang web nữa thôi nhé , bạn nào muốn lấy code cứ ghi địa chi web bạn tại đây !

cảm ơn bác nhiều lắm

rockmanvnx6 chào bạn !! mình thấy code web bạn viết rất đẹp+hay !! mình đang cần nó bạn share cho mình với 

graycap1@gmail.com !! thank bạn

code web bạn sẽ giống bạn nhuasari nhé:

Bạn chọn CHỨC NĂNG KHÁC => MÃ HTML , META , chèn vào đầu đoạn code sau :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$("a[id*='product_wrap']").tooltip({

content: function(){return $(this).html().replace('100_','')},
track: true,
});
});
</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

hay qua! giup minh vs. thank ban. 

linhpr0009@gmail.com

code đó cũng hợp với web bạn

Bạn ơi giúp mình với, Cảm ơn bạn nhiều

http://hatushop.mov.mn

Bạn chọn CHỨC NĂNG KHÁC => MÃ HTML , META , chèn vào đầu đoạn code sau :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$("a[id*='product_wrap']").tooltip({

content: function(){return $(this).html().replace('150_','')},
track: true,
});
});
</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

Của mình hiện ảnh nhỏ lắm Có code hợp không bạn?

http://vinhanh.tk/

bạn đổi kích cỡ sản phẩm thì phải , code mới bạn sẽ là :

Bạn chọn CHỨC NĂNG KHÁC => MÃ HTML , META , chèn vào đầu đoạn code sau :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$("a[id*='product_wrap']").tooltip({

content: function(){return $(this).html().replace('200_','')},
track: true,
});
});
</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

bạn đổi kích cỡ sản phẩm thì phải , code mới bạn sẽ là :....

 

Thank bạn nhé! Làm được rùi...

Dùng được cả 2 web http://www.trinhchien.tk/  và http://vinhanh.tk/

có thể làm cho mình đc ko, mình copy vào mà a bé quá. thanks!

Chao ban petplusvn , minh rat xin loi ban vi tra loi cham vi minh rat it khi vao webmienphi , code ban day , ban thu xong neu k dc thi noi lai cho minh nhe !

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$("a[id*='product_wrap']").tooltip({

content: function(){return $(this).html().replace('150_','')},
track: true,
});
});
</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

@rockmanvnx6 cảm ơn bạn rất nhiều nhưng mình chèn code vào ảnh vẫn bé ko lớn như ảnh trong website của bạn 

site bạn nó cấm chuột phải nên mình xem lỗi k tiện , bạn tạm thời bỏ nó đc k nhỉ ?

ok e bỏ rồi bác ah

Lâu k vào wmp nó thay đổi nhiều quá , bạn xóa code cũ đi thử lại code này nhé !

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(function() {

$("a[id*='product_wrap'] img").attr("data-original","");

$("a[id*='product_wrap']").tooltip({

content: function(){return $(this).html().replace('150_','')},
track: true,
});
});
</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

* cái này là mình làm đối phó , nếu website bạn áp dụng xong mà có lôi gì thì báo lại ngay với mình nhé , mình sẽ thử cách khác ,

bác ơi e copy vào nó ko hiện ảnh :((

em lại phải xóa đi rồi

ok , đc rồi mình sẽ thử tìm cách khác , wmp tự dưng thêm 1 đoạn code làm ảnh hưởng đến code của mình .

Chào bạn , bạn thử cái này nhé :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>

$(function() {
$("a[id*='product_wrap']").tooltip({
content: function(){return $(this).html().replace('150_','')},
track: true,
});
});

</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

xin lỗi , mình nhầm , cái này nhé bạn :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>

$(function() {

$("a[id*='product_wrap']").tooltip({

content: function(){
var $html = $(this).html().replace(/150_/g, '');
console.log('new HTML: '+$html);
return $html;
},
track: true,

});
});

</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

Giúp mình với http://shopnghiapig.mov.mn

chào bạn!

Bạn vui lòng cho mình xin code cho trang của mình nhé.: http:www.quanaothoitrangviha.mov.mn

Trân trọng cảm ơn!

@rockmanvnx6: bác ơi bác sửa lại giùm e cái code đc ko, e mới nâng cấp lên gói pro lên giao diện mới nó lại bị lỗi ảnh rồi

@shopnghiadg , 

Bạn chọn CHỨC NĂNG KHÁC => MÃ HTML , META , chèn vào đầu đoạn code sau :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>

$(function() {

$("a[id*='product_wrap']").tooltip({

content: function(){
var $html = $(this).html().replace(/150_/g, '');
console.log('new HTML: '+$html);
return $html;
},
track: true,

});
});

</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

@http:www.quanaothoitrangviha.mov.mn :

Bạn chọn CHỨC NĂNG KHÁC => MÃ HTML , META , chèn vào đầu đoạn code sau :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>

$(function() {

$("a[id*='product_wrap']").tooltip({

content: function(){
var $html = $(this).html().replace(/200_/g, '');
console.log('new HTML: '+$html);
return $html;
},
track: true,

});
});

</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

@petplusvn

Bạn xóa code cũ đi và thay thế bằng:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>

$(function() {

$("a[id*='product_wrap']").tooltip({

content: function(){
var $html = $(this).html().replace(/100_/g, '');
console.log('new HTML: '+$html);
return $html;
},
track: true,

});
});

</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

bạn cho tôi hỏi.

tôi chèn code này vào mà ảnh nó bé tí tẹo, ko to đc như của bạn. mong bạn hướng dẫn

thz bạn nhiều nhiều !

Đồ chơi trẻ em | do choi tre em |

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$("a[id*='product_wrap']").tooltip({

content: function(){return $(this).html().replace('100_','')},
track: true,
});
});
</script>
<style>
.ui-tooltip img{max-height:500px;}
.ui-widget-content{
z-index: 9999999;
background-color: #fff;
box-shadow: 5px 5px 8px #818181;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
padding: 5px;
border: 1px solid #eee;
max-width:1000px!important;
}
</style>

Đã khắc phục được bằng cách thay 

content: function(){return $(this).html().replace('100_','')},

sang 

content: function(){return $(this).html().replace('200_','')},

Góp ý với chủ Top thêm về việc ảnh xem trước để mặc định căn vào giữa màn hình đc thì tuyệt.

thz bạn nhiều nhiều !

Đồ chơi trẻ em | do choi tre em |