Skip to content

Commit

Permalink
Enable Multi-Image content block
Browse files Browse the repository at this point in the history
Display multi-image block using bxSlider.
  • Loading branch information
Izidor Matušov committed Nov 5, 2013
1 parent c800715 commit f227198
Show file tree
Hide file tree
Showing 10 changed files with 254 additions and 6 deletions.
12 changes: 12 additions & 0 deletions oscar/apps/dashboard/promotions/views.py
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,10 @@ class CreateImageView(CreateView):
model = Image


class CreateMultiImageView(CreateView):
model = MultiImage


class CreateAutomaticProductListView(CreateView):
model = AutomaticProductList

Expand Down Expand Up @@ -264,6 +268,10 @@ class UpdateImageView(UpdateView):
model = Image


class UpdateMultiImageView(UpdateView):
model = MultiImage


class UpdateAutomaticProductListView(UpdateView):
model = AutomaticProductList

Expand Down Expand Up @@ -318,6 +326,10 @@ class DeleteImageView(DeleteView):
model = Image


class DeleteMultiImageView(DeleteView):
model = MultiImage


class DeleteAutomaticProductListView(DeleteView):
model = AutomaticProductList

Expand Down
16 changes: 10 additions & 6 deletions oscar/apps/promotions/conf.py
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
from oscar.core.loading import get_classes
from oscar.core.loading import get_class

SingleProduct, RawHTML, Image, MultiImage, PagePromotion, \
AutomaticProductList, HandPickedProductList = get_classes('promotions.models',
['SingleProduct', 'RawHTML', 'Image', 'MultiImage', 'PagePromotion',
'AutomaticProductList', 'HandPickedProductList'])
SingleProduct = get_class('promotions.models', 'SingleProduct')
RawHTML = get_class('promotions.models', 'RawHTML')
Image = get_class('promotions.models', 'Image')
MultiImage = get_class('promotions.models', 'MultiImage')
PagePromotion = get_class('promotions.models', 'PagePromotion')
AutomaticProductList = get_class('promotions.models', 'AutomaticProductList')
HandPickedProductList = get_class('promotions.models', 'HandPickedProductList')
MultiImage = get_class('promotions.models', 'MultiImage')


def get_promotion_classes():
return (RawHTML, Image, SingleProduct, AutomaticProductList,
HandPickedProductList)
HandPickedProductList, MultiImage)


PROMOTION_CLASSES = get_promotion_classes()
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
197 changes: 197 additions & 0 deletions oscar/static/oscar/js/bxslider/jquery.bxslider.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
/**
* BxSlider v4.0 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2012
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
}

.bx-wrapper img {
max-width: 100%;
display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: solid #fff 5px;
left: -5px;
background: #fff;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
left: 10px;
background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
right: 10px;
background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}

.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
10 changes: 10 additions & 0 deletions oscar/static/oscar/js/bxslider/jquery.bxslider.min.js

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions oscar/static/oscar/js/oscar/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ var oscar = (function(o, $) {
if (o.responsive.isDesktop()) {
o.responsive.initNav();
o.responsive.initCarousel();
o.responsive.initSlider();
}
},
isDesktop: function() {
Expand Down Expand Up @@ -122,6 +123,13 @@ var oscar = (function(o, $) {
});
}
});
},
initSlider: function() {
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
pause: 7500
});
}
};

Expand Down
1 change: 1 addition & 0 deletions oscar/templates/oscar/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
<link rel="stylesheet" type="text/css" href="{% static "oscar/css/styles.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "oscar/css/responsive.css" %}" />
{% endif %}
<link rel="stylesheet" href="{% static "oscar/js/bxslider/jquery.bxslider.css" %}" />
{% endcompress %}
{% endblock %}
{% endblock %}
Expand Down
1 change: 1 addition & 0 deletions oscar/templates/oscar/partials/extrascripts.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@

{% compress js %}
<script src="{% static "oscar/js/elastislide/jquery.elastislide.js" %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static "oscar/js/bxslider/jquery.bxslider.min.js" %}" type="text/javascript" charset="utf-8"></script>
{% endcompress %}
15 changes: 15 additions & 0 deletions oscar/templates/oscar/promotions/multiimage.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{% load staticfiles %}

{% if promotion.images %}
<ul class="bxslider">
{% for promotion_image in promotion.images.all %}
<li>
{% if promotion_image.link_url %}
<a href="{{ promotion_image.link_url }}"><img src="{% static promotion_image.image.url %}" title="{{ promotion_image.name }}" /></a>
{% else %}
<img src="{% static promotion_image.image.url %}" title="{{ promotion_image.name }}" />
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}

0 comments on commit f227198

Please sign in to comment.