Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

The index page

  • Loading branch information...
commit 85101bc8f7d28f3d12bc3e058aeb1dd71106f091 1 parent 626ae4f
@artshpakov authored
View
17 static/css/coin-slider-styles.css
@@ -0,0 +1,17 @@
+/*
+ Coin Slider jQuery plugin CSS styles
+ http://workshop.rs/projects/coin-slider
+*/
+
+
+.coin-slider { overflow: hidden; zoom: 1; position: relative; }
+.coin-slider a{ text-decoration: none; outline: none; border: none; }
+
+.cs-buttons { font-size: 0px; padding: 10px; float: left; }
+.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
+.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
+
+.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
+
+.cs-prev,
+.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
View
48 static/css/main.css
@@ -57,6 +57,29 @@ p {
text-align: justify;
}
+/* ============= index layout ============*/
+
+#cover {
+ height: 536px; width: 986px;
+ background: url(/static/img/cover.png) center no-repeat;
+ box-shadow: 0 10px 20px #200400;
+ position: relative;
+}
+
+#cover #menu {
+ top: 380px; left: 640px;
+ width: 300px;
+ position: absolute;
+}
+
+#coin-slider-slider {
+ left: 21px; top: 24px;
+ border: 1px solid #E8B53C;
+ position: absolute;
+}
+
+/* ============= page layout =============*/
+
a#logo {
display: block;
height: 80px;
@@ -99,11 +122,32 @@ a#logo {
float: left;
}
-#main #top .corner {
+#main #top {
+ overflow: hidden;
+ margin-bottom: 25px;
+}
+
+#main #top img {
+ display: block;
+ float: left;
+}
+
+#main #top .right-column {
+ margin-left: 450px;
+}
+
+#main #top #corner {
height: 157px;
overflow: hidden;
}
-#main #top .corner p {
+#main #top #corner p {
text-align: right;
}
+
+#main #top #teaser {
+ background: url(/static/img/teaser.png);
+ width: 380px;
+ height: 87px;
+ float: right;
+}
View
BIN  static/img/slider/pic01.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  static/img/slider/pic02.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  static/img/slider/pic03.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  static/img/slider/pic04.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
51 static/js/coin-slider.min.js
@@ -0,0 +1,51 @@
+/**
+ * Coin Slider - Unique jQuery Image Slider
+ * @version: 1.0 - (2010/04/04)
+ * @requires jQuery v1.2.2 or later
+ * @author Ivan Lazarevic
+ * Examples and documentation at: http://workshop.rs/projects/coin-slider/
+
+ * Licensed under MIT licence:
+ * http://www.opensource.org/licenses/mit-license.php
+**/
+
+(function($){var params=new Array;var order=new Array;var images=new Array;var links=new Array;var linksTarget=new Array;var titles=new Array;var interval=new Array;var imagePos=new Array;var appInterval=new Array;var squarePos=new Array;var reverse=new Array;$.fn.coinslider=$.fn.CoinSlider=function(options){init=function(el){order[el.id]=new Array();images[el.id]=new Array();links[el.id]=new Array();linksTarget[el.id]=new Array();titles[el.id]=new Array();imagePos[el.id]=0;squarePos[el.id]=0;reverse[el.id]=1;params[el.id]=$.extend({},$.fn.coinslider.defaults,options);$.each($('#'+el.id+' img'),function(i,item){images[el.id][i]=$(item).attr('src');links[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('href'):'';linksTarget[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('target'):'';titles[el.id][i]=$(item).next().is('span')?$(item).next().html():'';$(item).hide();$(item).next().hide();});$(el).css({'background-image':'url('+images[el.id][0]+')','width':params[el.id].width,'height':params[el.id].height,'position':'relative','background-position':'top left'}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");$.setFields(el);if(params[el.id].navigation)
+$.setNavigation(el);$.transition(el,0);$.transitionCall(el);}
+$.setFields=function(el){tWidth=sWidth=parseInt(params[el.id].width/params[el.id].spw);tHeight=sHeight=parseInt(params[el.id].height/params[el.id].sph);counter=sLeft=sTop=0;tgapx=gapx=params[el.id].width-params[el.id].spw*sWidth;tgapy=gapy=params[el.id].height-params[el.id].sph*sHeight;for(i=1;i<=params[el.id].sph;i++){gapx=tgapx;if(gapy>0){gapy--;sHeight=tHeight+1;}else{sHeight=tHeight;}
+for(j=1;j<=params[el.id].spw;j++){if(gapx>0){gapx--;sWidth=tWidth+1;}else{sWidth=tWidth;}
+order[el.id][counter]=i+''+j;counter++;if(params[el.id].links)
+$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");else
+$('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");$("#cs-"+el.id+i+j).css({'background-position':-sLeft+'px '+(-sTop+'px'),'left':sLeft,'top':sTop});sLeft+=sWidth;}
+sTop+=sHeight;sLeft=0;}
+$('.cs-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('.cs-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});$('#cs-title-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('#cs-title-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});if(params[el.id].hoverPause){$('.cs-'+el.id).mouseover(function(){params[el.id].pause=true;});$('.cs-'+el.id).mouseout(function(){params[el.id].pause=false;});$('#cs-title-'+el.id).mouseover(function(){params[el.id].pause=true;});$('#cs-title-'+el.id).mouseout(function(){params[el.id].pause=false;});}};$.transitionCall=function(el){clearInterval(interval[el.id]);delay=params[el.id].delay+params[el.id].spw*params[el.id].sph*params[el.id].sDelay;interval[el.id]=setInterval(function(){$.transition(el)},delay);}
+$.transition=function(el,direction){if(params[el.id].pause==true)return;$.effect(el);squarePos[el.id]=0;appInterval[el.id]=setInterval(function(){$.appereance(el,order[el.id][squarePos[el.id]])},params[el.id].sDelay);$(el).css({'background-image':'url('+images[el.id][imagePos[el.id]]+')'});if(typeof(direction)=="undefined")
+imagePos[el.id]++;else
+if(direction=='prev')
+imagePos[el.id]--;else
+imagePos[el.id]=direction;if(imagePos[el.id]==images[el.id].length){imagePos[el.id]=0;}
+if(imagePos[el.id]==-1){imagePos[el.id]=images[el.id].length-1;}
+$('.cs-button-'+el.id).removeClass('cs-active');$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');if(titles[el.id][imagePos[el.id]]){$('#cs-title-'+el.id).css({'opacity':0}).animate({'opacity':params[el.id].opacity},params[el.id].titleSpeed);$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);}else{$('#cs-title-'+el.id).css('opacity',0);}};$.appereance=function(el,sid){$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);if(squarePos[el.id]==params[el.id].spw*params[el.id].sph){clearInterval(appInterval[el.id]);return;}
+$('#cs-'+el.id+sid).css({opacity:0,'background-image':'url('+images[el.id][imagePos[el.id]]+')'});$('#cs-'+el.id+sid).animate({opacity:1},300);squarePos[el.id]++;};$.setNavigation=function(el){$(el).append("<div id='cs-navigation-"+el.id+"'></div>");$('#cs-navigation-'+el.id).hide();$('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");$('#cs-prev-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'left':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el,'prev');$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$('#cs-next-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'right':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el);$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));for(k=1;k<images[el.id].length+1;k++){$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");}
+$.each($('.cs-button-'+el.id),function(i,item){$(item).click(function(e){$('.cs-button-'+el.id).removeClass('cs-active');$(this).addClass('cs-active');e.preventDefault();$.transition(el,i);$.transitionCall(el);})});$('#cs-navigation-'+el.id+' a').mouseout(function(){$('#cs-navigation-'+el.id).hide();params[el.id].pause=false;});$("#cs-buttons-"+el.id).css({'left':'50%','margin-left':-images[el.id].length*15/2-5,'position':'relative'});}
+$.effect=function(el){effA=['random','swirl','rain','straight'];if(params[el.id].effect=='')
+eff=effA[Math.floor(Math.random()*(effA.length))];else
+eff=params[el.id].effect;order[el.id]=new Array();if(eff=='random'){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}
+$.random(order[el.id]);}
+if(eff=='rain'){$.rain(el);}
+if(eff=='swirl')
+$.swirl(el);if(eff=='straight')
+$.straight(el);reverse[el.id]*=-1;if(reverse[el.id]>0){order[el.id].reverse();}}
+$.random=function(arr){var i=arr.length;if(i==0)return false;while(--i){var j=Math.floor(Math.random()*(i+1));var tempi=arr[i];var tempj=arr[j];arr[i]=tempj;arr[j]=tempi;}}
+$.swirl=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var x=1;var y=1;var going=0;var num=0;var c=0;var dowhile=true;while(dowhile){num=(going==0||going==2)?m:n;for(i=1;i<=num;i++){order[el.id][c]=x+''+y;c++;if(i!=num){switch(going){case 0:y++;break;case 1:x++;break;case 2:y--;break;case 3:x--;break;}}}
+going=(going+1)%4;switch(going){case 0:m--;y++;break;case 1:n--;x++;break;case 2:m--;y--;break;case 3:n--;x--;break;}
+check=$.max(n,m)-$.min(n,m);if(m<=check&&n<=check)
+dowhile=false;}}
+$.rain=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var c=0;var to=to2=from=1;var dowhile=true;while(dowhile){for(i=from;i<=to;i++){order[el.id][c]=i+''+parseInt(to2-i+1);c++;}
+to2++;if(to<n&&to2<m&&n<m){to++;}
+if(to<n&&n>=m){to++;}
+if(to2>m){from++;}
+if(from>to)dowhile=false;}}
+$.straight=function(el){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}}
+$.min=function(n,m){if(n>m)return m;else return n;}
+$.max=function(n,m){if(n<m)return m;else return n;}
+this.each(function(){init(this);});};$.fn.coinslider.defaults={width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,links:true,hoverPause:true};})(jQuery);
View
38 templates/index.html
@@ -1,10 +1,11 @@
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
- <meta charset="UTF-8">
- <title>{% block title %}Vinograd{% endblock %}</title>
+ <meta charset="UTF-8">
+ <title>{% block title %}Vinograd{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="/static/css/main.css" />
+ <link rel="stylesheet" href="/static/css/coin-slider-styles.css" />
{% endblock %}
</head>
@@ -12,17 +13,34 @@
{% load mainmenu from catalog_tags %}
{% block content %}
- <div style="position: relative; top: 50%;">
- <div style="height: 536px; width: 986px; margin: -268px auto 0; background: url(/static/img/cover.png) center no-repeat; position: relative; box-shadow: 0 10px 20px #200400;">
- <div style="top: 380px; left: 640px; width: 300px; position: absolute">
- {% mainmenu "indexmenu" %}
- </div>
- </div>
- </div>
+ <table width="100%" height="100%">
+ <tr valign="middle">
+ <td align="center">
+ <div id="cover">
+ <div id="slider">
+ <img src="/static/img/slider/pic01.jpg" />
+ <img src="/static/img/slider/pic02.jpg" />
+ <img src="/static/img/slider/pic03.jpg" />
+ <img src="/static/img/slider/pic04.jpg" />
+ </div>
+
+ <div id="menu">
+ {% mainmenu "indexmenu" %}
+ </div>
+ </div>
+ </td>
+ </tr>
+ </table>
{% endblock %}
</body>
{% block javascripts %}
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript" src="/static/js/coin-slider.min.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('#slider').coinslider({width: 558, height: 487, navigation: false, links: false});
+ });
+ </script>
{% endblock %}
</html>
View
10 templates/layout.html
@@ -20,12 +20,12 @@
{% block content %}
<h2 style="text-align: right;">&bull; {{ object.title|upper }} &bull;</h2>
- <div id="top" style="overflow: hidden; margin-bottom: 25px;">
- <img src="/static/img/pic-{{ object.slug }}.png" alt="Front" style="display: block; float: left;" />
+ <div id="top">
+ <img src="/static/img/pic-{{ object.slug }}.png" />
- <div style="margin-left: 450px;">
- <div class="corner" style="">{% block corner %}{% endblock %}</div>
- <div style="background: url(/static/img/teaser.png); width: 380px; height: 87px; float: right;"></div>
+ <div class="right-column">
+ <div id="corner">{% block corner %}{% endblock %}</div>
+ <div id="teaser"></div>
</div>
</div>
<div style="clear: both;"></div>
Please sign in to comment.
Something went wrong with that request. Please try again.