Skip to content

V
venshop
Commit 56c684b6 by vulehuan
Options

optimize list product code and code product detail page

parent 62fea398
Showing with 1025 additions and 90 deletions
venshop_app/app/assets/javascripts/custom.js
......@@ -7,6 +7,7 @@
}
//
$('.carousel').carousel();
$('a.fancybox').fancybox({'type': 'image'});
});
})(jQuery);
jQuery.noConflict();
\ No newline at end of file
venshop_app/app/assets/stylesheets/custom.css.scss
......@@ -204,11 +204,11 @@ h1 {
.corner-right {
right: 3px;
background-position: top right;
background-position-y: -100px;
background-position: 0 -100px;
}
.text {
display: block;
background-position-y: -50px;
background-position: 0 -50px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
......@@ -278,7 +278,7 @@ footer {
h2 {
margin: 0;
padding: 0;
background-position-y: -50px;
background-position: 0 -50px;
background-repeat: repeat-x;
height: 29px;
position: relative;
......@@ -292,7 +292,7 @@ footer {
text-transform: uppercase;
font-size: 11px;
font-family: Tahoma;
background-position-y: -50px;
background-position: 0 -50px;
span {
display: block;
width: 29px;
......@@ -441,9 +441,14 @@ footer {
header, .block-search {
margin-left: -15px;
}
/* form {
margin: 30px auto;
text-align: left;
max-width: 460px;
}*/
}
.product-detail {
.price {
margin: 10px 0;
text-align: center;
color: #FF0000;
font-size: 20px;
font-weight: bold;
}
}
\ No newline at end of file
venshop_app/app/controllers/products_controller.rb
......@@ -3,5 +3,7 @@ class ProductsController < ApplicationController
end
def show
@product = Product.find(params[:id])
@other_products = Product.get_other_products(@product.id, product_category_id: @product.product_category_id, limit: 16)
end
end
venshop_app/app/models/product.rb
......@@ -12,7 +12,7 @@ class Product < ActiveRecord::Base
end
# Returns products in a category
def self.get_products_by_category(options = { limit: 16, product_category_id: 0 })
def self.get_products_by_category(options = { product_category_id: 0, limit: 16 })
limit = options[:limit]
product_category_id = options[:product_category_id]
page = options[:page]
......@@ -21,4 +21,15 @@ class Product < ActiveRecord::Base
.paginate(:page => page, :per_page => limit)
.order('created_at DESC').order('updated_at DESC').order('name')
end
#Returns other products
def self.get_other_products(product_id, options = { product_category_id: 0, limit: 12 })
limit = options[:limit]
product_category_id = options[:product_category_id]
return Product.select('id, name, image_medium, price, price_currency')
.where(availability: 'instock').where(product_category_id: product_category_id).where('id != ?', product_id)
.order('created_at DESC').order('updated_at DESC').order('name')
.limit(limit)
end
end
\ No newline at end of file
venshop_app/app/views/default_pages/home.html.erb
......@@ -3,31 +3,7 @@
<h2 class="sprite-2">
Recommended Items<span class="sprite-2"></span>
</h2>
<% @recommed_items.each_slice(4) do |row| %>
<div class="row">
<%
row.each do |obj|
url = product_path(obj)
add_to_card_url = cards_path + "?product_id=" + obj.id.to_s
%>
<div class="col-md-3 col-sm-3">
<div class="item">
<h4>
<a href="<%= url %>" title="<%= obj.name %>"><%= obj.name %></a>
</h4>
<a href="<%= url %>" class="thumbnail" title="<%= obj.name %>"><img src="<%= obj.image_medium %>" alt="<%= obj.name %>"></a>
<div class="price">
Price: <span><%= number_with_delimiter(obj.price) %> <%= obj.price_currency %></span>
</div>
<div class="action">
<a class="view-detail" href="<%= url %>" title="<%= obj.name %>">Detail</a><a class="order"
href="<%= add_to_card_url %>">Order</a>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
<%= render 'shared/grid', items: @recommed_items %>
<div class="clearfix"></div>
</div>
<!-- Newest Items -->
......@@ -35,29 +11,5 @@
<h2 class="sprite-2">
Newest Items<span class="sprite-2"></span>
</h2>
<% @newest_items.each_slice(4) do |row| %>
<div class="row">
<%
row.each do |obj|
url = product_path(obj)
add_to_card_url = cards_path + "?product_id=" + obj.id.to_s
%>
<div class="col-md-3 col-sm-3">
<div class="item">
<h4>
<a href="<%= url %>" title="<%= obj.name %>"><%= obj.name %></a>
</h4>
<a href="<%= url %>" class="thumbnail" title="<%= obj.name %>"><img src="<%= obj.image_medium %>" alt="<%= obj.name %>"></a>
<div class="price">
Price: <span><%= number_with_delimiter(obj.price) %> <%= obj.price_currency %></span>
</div>
<div class="action">
<a class="view-detail" href="<%= url %>" title="<%= obj.name %>">Detail</a><a class="order"
href="<%= add_to_card_url %>">Order</a>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
<%= render 'shared/grid', items: @newest_items %>
</div>
\ No newline at end of file
venshop_app/app/views/layouts/application.html.erb
......@@ -7,13 +7,14 @@
<!-- Bootstrap core CSS -->
<link
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet">
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
<link href="<%= root_path %>js/fancybox/jquery.fancybox.css" rel="stylesheet" />
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
</head>
<body>
<div class="container">
......@@ -50,6 +51,7 @@
<%= render 'layouts/footer' %>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="<%= root_path %>js/fancybox/jquery.fancybox.pack.js"></script>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
</body>
</html>
venshop_app/app/views/product_categories/show.html.erb
......@@ -3,31 +3,8 @@
<h2 class="sprite-2">
<%= @title %><span class="sprite-2"></span>
</h2>
<% @items.each_slice(4) do |row| %>
<div class="row">
<%
row.each do |obj|
url = product_path(obj)
add_to_card_url = cards_path + "?product_id=" + obj.id.to_s
%>
<div class="col-md-3 col-sm-3">
<div class="item">
<h4>
<a href="<%= url %>" title="<%= obj.name %>"><%= obj.name %></a>
</h4>
<a href="<%= url %>" class="thumbnail" title="<%= obj.name %>"><img src="<%= obj.image_medium %>" alt="<%= obj.name %>"></a>
<div class="price">
Price: <span><%= number_with_delimiter(obj.price) %> <%= obj.price_currency %></span>
</div>
<div class="action">
<a class="view-detail" href="<%= url %>" title="<%= obj.name %>">Detail</a><a class="order"
href="<%= add_to_card_url %>">Order</a>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
<%= render 'shared/grid', items:@items %>
<%= will_paginate @items, renderer: BootstrapPagination::Rails %>
<div class="clearfix"></div>
</div>
\ No newline at end of file
venshop_app/app/views/products/show.html.erb
<h1>Products#show</h1>
<p>Find me in app/views/products/show.html.erb</p>
<div class="body-box">
<h2 class="sprite-2"><%= @product.name %><span class="sprite-2"></span></h2>
<div class="text-justify product-detail">
<div class="row">
<div class="col-md-6">
<a data-fancybox-type="image" href="<%= @product.image_medium %>" class="thumbnail fancybox"><img src="<%= @product.image_medium %>" alt="" /></a>
<div class="price">
<div class="pull-left"><%= number_with_delimiter(@product.price) %> <%= @product.price_currency %></div>
<div class="pull-right"><a class="order btn btn-primary" href="<%= cards_path + "?product_id=" + @product.id.to_s %>"><span class="glyphicon glyphicon-shopping-cart"></span> Order</a></div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6">
<table class="table table-hover">
<tr><td>Headline</td><td><%= @product.headline %></td></tr>
<tr><td>Availability</td><td><%= @product.availability %></td></tr>
<tr><td>Code</td><td><%= @product.code %></td></tr>
<tr><td>Condition</td><td><%= @product.condition %></td></tr>
<tr><td>Review rate</td><td><%= @product.review_rate %></td></tr>
</table>
</div>
</div>
<%= @product.description %>
</div>
</div>
<% if @other_products.any? %>
<!-- Others -->
<div class="body-box grid-view">
<h2 class="sprite-2">
Other products<span class="sprite-2"></span>
</h2>
<%= render 'shared/grid', items:@other_products %>
<div class="clearfix"></div>
</div>
<% end %>
\ No newline at end of file
venshop_app/app/views/shared/_grid.html.erb 0 → 100644
<%
if items == nil
return ''
end
items.each_slice(4) do |row|
%>
<div class="row">
<%
row.each do |obj|
url = product_path(obj)
add_to_card_url = cards_path + "?product_id=" + obj.id.to_s
%>
<div class="col-md-3 col-sm-3">
<div class="item">
<h4>
<a href="<%= url %>" title="<%= obj.name %>"><%= obj.name %></a>
</h4>
<a href="<%= url %>" class="thumbnail" title="<%= obj.name %>"><img src="<%= obj.image_medium %>" alt="<%= obj.name %>"></a>
<div class="price">
Price: <span><%= number_with_delimiter(obj.price) %> <%= obj.price_currency %></span>
</div>
<div class="action">
<a class="view-detail" href="<%= url %>" title="<%= obj.name %>">Detail</a><a class="order"
href="<%= add_to_card_url %>">Order</a>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
\ No newline at end of file
venshop_app/lib/tasks/sample_data.rake
......@@ -48,7 +48,7 @@ namespace :db do
doc.elements.each('ResultSet/Result/Hit') do |ele|
next if ele.elements['Name'] == nil
i += 1
break if i > 20
break if i > 100
name = ele.elements['Name'].text
description = ele.elements['Description'].text
......
venshop_app/public/js/fancybox/helpers/jquery.fancybox-buttons.css 0 → 100644
#fancybox-buttons {
position: fixed;
left: 0;
width: 100%;
z-index: 8050;
}
#fancybox-buttons.top {
top: 10px;
}
#fancybox-buttons.bottom {
bottom: 10px;
}
#fancybox-buttons ul {
display: block;
width: 166px;
height: 30px;
margin: 0 auto;
padding: 0;
list-style: none;
border: 1px solid #111;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
-moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
background: rgb(50,50,50);
background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}
#fancybox-buttons ul li {
float: left;
margin: 0;
padding: 0;
}
#fancybox-buttons a {
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background-color: transparent;
background-image: url('fancybox_buttons.png');
background-repeat: no-repeat;
outline: none;
opacity: 0.8;
}
#fancybox-buttons a:hover {
opacity: 1;
}
#fancybox-buttons a.btnPrev {
background-position: 5px 0;
}
#fancybox-buttons a.btnNext {
background-position: -33px 0;
border-right: 1px solid #3e3e3e;
}
#fancybox-buttons a.btnPlay {
background-position: 0 -30px;
}
#fancybox-buttons a.btnPlayOn {
background-position: -30px -30px;
}
#fancybox-buttons a.btnToggle {
background-position: 3px -60px;
border-left: 1px solid #111;
border-right: 1px solid #3e3e3e;
width: 35px
}
#fancybox-buttons a.btnToggleOn {
background-position: -27px -60px;
}
#fancybox-buttons a.btnClose {
border-left: 1px solid #111;
width: 35px;
background-position: -56px 0px;
}
#fancybox-buttons a.btnDisabled {
opacity : 0.4;
cursor: default;
}
\ No newline at end of file
venshop_app/public/js/fancybox/helpers/jquery.fancybox-buttons.js 0 → 100644
/*!
* Buttons helper for fancyBox
* version: 1.0.5 (Mon, 15 Oct 2012)
* @requires fancyBox v2.0 or later
*
* Usage:
* $(".fancybox").fancybox({
* helpers : {
* buttons: {
* position : 'top'
* }
* }
* });
*
*/
(function ($) {
//Shortcut for fancyBox object
var F = $.fancybox;
//Add helper object
F.helpers.buttons = {
defaults : {
skipSingle : false, // disables if gallery contains single image
position : 'top', // 'top' or 'bottom'
tpl : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:;"></a></li></ul></div>'
},
list : null,
buttons: null,
beforeLoad: function (opts, obj) {
//Remove self if gallery do not have at least two items
if (opts.skipSingle && obj.group.length < 2) {
obj.helpers.buttons = false;
obj.closeBtn = true;
return;
}
//Increase top margin to give space for buttons
obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
},
onPlayStart: function () {
if (this.buttons) {
this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
}
},
onPlayEnd: function () {
if (this.buttons) {
this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
}
},
afterShow: function (opts, obj) {
var buttons = this.buttons;
if (!buttons) {
this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
buttons = {
prev : this.list.find('.btnPrev').click( F.prev ),
next : this.list.find('.btnNext').click( F.next ),
play : this.list.find('.btnPlay').click( F.play ),
toggle : this.list.find('.btnToggle').click( F.toggle ),
close : this.list.find('.btnClose').click( F.close )
}
}
//Prev
if (obj.index > 0 || obj.loop) {
buttons.prev.removeClass('btnDisabled');
} else {
buttons.prev.addClass('btnDisabled');
}
//Next / Play
if (obj.loop || obj.index < obj.group.length - 1) {
buttons.next.removeClass('btnDisabled');
buttons.play.removeClass('btnDisabled');
} else {
buttons.next.addClass('btnDisabled');
buttons.play.addClass('btnDisabled');
}
this.buttons = buttons;
this.onUpdate(opts, obj);
},
onUpdate: function (opts, obj) {
var toggle;
if (!this.buttons) {
return;
}
toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
//Size toggle button
if (obj.canShrink) {
toggle.addClass('btnToggleOn');
} else if (!obj.canExpand) {
toggle.addClass('btnDisabled');
}
},
beforeClose: function () {
if (this.list) {
this.list.remove();
}
this.list = null;
this.buttons = null;
}
};
}(jQuery));
venshop_app/public/js/fancybox/helpers/jquery.fancybox-media.js 0 → 100644
/*!
* Media helper for fancyBox
* version: 1.0.6 (Fri, 14 Jun 2013)
* @requires fancyBox v2.0 or later
*
* Usage:
* $(".fancybox").fancybox({
* helpers : {
* media: true
* }
* });
*
* Set custom URL parameters:
* $(".fancybox").fancybox({
* helpers : {
* media: {
* youtube : {
* params : {
* autoplay : 0
* }
* }
* }
* }
* });
*
* Or:
* $(".fancybox").fancybox({,
* helpers : {
* media: true
* },
* youtube : {
* autoplay: 0
* }
* });
*
* Supports:
*
* Youtube
* http://www.youtube.com/watch?v=opj24KnzrWo
* http://www.youtube.com/embed/opj24KnzrWo
* http://youtu.be/opj24KnzrWo
* http://www.youtube-nocookie.com/embed/opj24KnzrWo
* Vimeo
* http://vimeo.com/40648169
* http://vimeo.com/channels/staffpicks/38843628
* http://vimeo.com/groups/surrealism/videos/36516384
* http://player.vimeo.com/video/45074303
* Metacafe
* http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/
* http://www.metacafe.com/watch/7635964/
* Dailymotion
* http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people
* Twitvid
* http://twitvid.com/QY7MD
* Twitpic
* http://twitpic.com/7p93st
* Instagram
* http://instagr.am/p/IejkuUGxQn/
* http://instagram.com/p/IejkuUGxQn/
* Google maps
* http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17
* http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
* http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56
*/
(function ($) {
"use strict";
//Shortcut for fancyBox object
var F = $.fancybox,
format = function( url, rez, params ) {
params = params || '';
if ( $.type( params ) === "object" ) {
params = $.param(params, true);
}
$.each(rez, function(key, value) {
url = url.replace( '$' + key, value || '' );
});
if (params.length) {
url += ( url.indexOf('?') > 0 ? '&' : '?' ) + params;
}
return url;
};
//Add helper object
F.helpers.media = {
defaults : {
youtube : {
matcher : /(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(watch\?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*)).*/i,
params : {
autoplay : 1,
autohide : 1,
fs : 1,
rel : 0,
hd : 1,
wmode : 'opaque',
enablejsapi : 1
},
type : 'iframe',
url : '//www.youtube.com/embed/$3'
},
vimeo : {
matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,
params : {
autoplay : 1,
hd : 1,
show_title : 1,
show_byline : 1,
show_portrait : 0,
fullscreen : 1
},
type : 'iframe',
url : '//player.vimeo.com/video/$1'
},
metacafe : {
matcher : /metacafe.com\/(?:watch|fplayer)\/([\w\-]{1,10})/,
params : {
autoPlay : 'yes'
},
type : 'swf',
url : function( rez, params, obj ) {
obj.swf.flashVars = 'playerVars=' + $.param( params, true );
return '//www.metacafe.com/fplayer/' + rez[1] + '/.swf';
}
},
dailymotion : {
matcher : /dailymotion.com\/video\/(.*)\/?(.*)/,
params : {
additionalInfos : 0,
autoStart : 1
},
type : 'swf',
url : '//www.dailymotion.com/swf/video/$1'
},
twitvid : {
matcher : /twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i,
params : {
autoplay : 0
},
type : 'iframe',
url : '//www.twitvid.com/embed.php?guid=$1'
},
twitpic : {
matcher : /twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i,
type : 'image',
url : '//twitpic.com/show/full/$1/'
},
instagram : {
matcher : /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i,
type : 'image',
url : '//$1/p/$2/media/?size=l'
},
google_maps : {
matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i,
type : 'iframe',
url : function( rez ) {
return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed');
}
}
},
beforeLoad : function(opts, obj) {
var url = obj.href || '',
type = false,
what,
item,
rez,
params;
for (what in opts) {
if (opts.hasOwnProperty(what)) {
item = opts[ what ];
rez = url.match( item.matcher );
if (rez) {
type = item.type;
params = $.extend(true, {}, item.params, obj[ what ] || ($.isPlainObject(opts[ what ]) ? opts[ what ].params : null));
url = $.type( item.url ) === "function" ? item.url.call( this, rez, params, obj ) : format( item.url, rez, params );
break;
}
}
}
if (type) {
obj.href = url;
obj.type = type;
obj.autoHeight = false;
}
}
};
}(jQuery));
\ No newline at end of file
venshop_app/public/js/fancybox/helpers/jquery.fancybox-thumbs.css 0 → 100644
#fancybox-thumbs {
position: fixed;
left: 0;
width: 100%;
overflow: hidden;
z-index: 8050;
}
#fancybox-thumbs.bottom {
bottom: 2px;
}
#fancybox-thumbs.top {
top: 2px;
}
#fancybox-thumbs ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
#fancybox-thumbs ul li {
float: left;
padding: 1px;
opacity: 0.5;
}
#fancybox-thumbs ul li.active {
opacity: 0.75;
padding: 0;
border: 1px solid #fff;
}
#fancybox-thumbs ul li:hover {
opacity: 1;
}
#fancybox-thumbs ul li a {
display: block;
position: relative;
overflow: hidden;
border: 1px solid #222;
background: #111;
outline: none;
}
#fancybox-thumbs ul li img {
display: block;
position: relative;
border: 0;
padding: 0;
max-width: none;
}
\ No newline at end of file
venshop_app/public/js/fancybox/helpers/jquery.fancybox-thumbs.js 0 → 100644
/*!
* Thumbnail helper for fancyBox
* version: 1.0.7 (Mon, 01 Oct 2012)
* @requires fancyBox v2.0 or later
*
* Usage:
* $(".fancybox").fancybox({
* helpers : {
* thumbs: {
* width : 50,
* height : 50
* }
* }
* });
*
*/
(function ($) {
//Shortcut for fancyBox object
var F = $.fancybox;
//Add helper object
F.helpers.thumbs = {
defaults : {
width : 50, // thumbnail width
height : 50, // thumbnail height
position : 'bottom', // 'top' or 'bottom'
source : function ( item ) { // function to obtain the URL of the thumbnail image
var href;
if (item.element) {
href = $(item.element).find('img').attr('src');
}
if (!href && item.type === 'image' && item.href) {
href = item.href;
}
return href;
}
},
wrap : null,
list : null,
width : 0,
init: function (opts, obj) {
var that = this,
list,
thumbWidth = opts.width,
thumbHeight = opts.height,
thumbSource = opts.source;
//Build list structure
list = '';
for (var n = 0; n < obj.group.length; n++) {
list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
}
this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
//Load each thumbnail
$.each(obj.group, function (i) {
var href = thumbSource( obj.group[ i ] );
if (!href) {
return;
}
$("<img />").load(function () {
var width = this.width,
height = this.height,
widthRatio, heightRatio, parent;
if (!that.list || !width || !height) {
return;
}
//Calculate thumbnail width/height and center it
widthRatio = width / thumbWidth;
heightRatio = height / thumbHeight;
parent = that.list.children().eq(i).find('a');
if (widthRatio >= 1 && heightRatio >= 1) {
if (widthRatio > heightRatio) {
width = Math.floor(width / heightRatio);
height = thumbHeight;
} else {
width = thumbWidth;
height = Math.floor(height / widthRatio);
}
}
$(this).css({
width : width,
height : height,
top : Math.floor(thumbHeight / 2 - height / 2),
left : Math.floor(thumbWidth / 2 - width / 2)
});
parent.width(thumbWidth).height(thumbHeight);
$(this).hide().appendTo(parent).fadeIn(300);
}).attr('src', href);
});
//Set initial width
this.width = this.list.children().eq(0).outerWidth(true);
this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
},
beforeLoad: function (opts, obj) {
//Remove self if gallery do not have at least two items
if (obj.group.length < 2) {
obj.helpers.thumbs = false;
return;
}
//Increase bottom margin to give space for thumbs
obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
},
afterShow: function (opts, obj) {
//Check if exists and create or update list
if (this.list) {
this.onUpdate(opts, obj);
} else {
this.init(opts, obj);
}
//Set active element
this.list.children().removeClass('active').eq(obj.index).addClass('active');
},
//Center list
onUpdate: function (opts, obj) {
if (this.list) {
this.list.stop(true).animate({
'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
}, 150);
}
},
beforeClose: function () {
if (this.wrap) {
this.wrap.remove();
}
this.wrap = null;
this.list = null;
this.width = 0;
}
}
}(jQuery));
\ No newline at end of file
venshop_app/public/js/fancybox/jquery.fancybox.css 0 → 100644
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite@2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading@2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
\ No newline at end of file
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