Einführung ThumbPages und Fahrzeug-Farbwechsler
This commit is contained in:
@@ -100,5 +100,7 @@ define('TBL_IMAGE_TEXT', 'ahd_image_text');
|
||||
define('TBL_IMAGE', 'ahd_image');
|
||||
define('TBL_TEXT', 'ahd_text');
|
||||
define('TBL_SUBLINE', 'ahd_subline');
|
||||
define('TBL_CAR_COLOR', 'ahd_car_color');
|
||||
define('TBL_THUMB', 'ahd_thumb');
|
||||
|
||||
require_once(PATH_CNF . 'config_version.php');
|
||||
25
css/ahd.css
25
css/ahd.css
@@ -1,5 +1,5 @@
|
||||
body {
|
||||
padding: 50px 0;
|
||||
padding: 50px 0 100px 0;
|
||||
font-family: Verdana, Arial, sans-serif;
|
||||
text-align: justify;
|
||||
}
|
||||
@@ -81,6 +81,29 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.car-color img:not(:first-of-type) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.car-color-thumbs img {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.thumbnail .caption {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.caption {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.subaru_logo {
|
||||
margin-top: 12px;
|
||||
|
||||
2
css/ahd.min.css
vendored
2
css/ahd.min.css
vendored
@@ -1 +1 @@
|
||||
body{padding:50px 0;font-family:Verdana,Arial,sans-serif;text-align:justify}li.dropdown-submenu{position:relative}li.dropdown-submenu:hover>ul.dropdown-menu{display:block}li.dropdown:hover>ul.dropdown-menu{display:block}ul.dropdown-menu.pull-left{margin-top:-6px;border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;top:0;left:100%}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:bold}#footer h3{text-decoration:underline}#footer:hover .navbar-brand{height:auto}#footer .navbar-brand{margin-left:0}#footer .navbar-brand p{font-size:14px}.container-fluid{max-width:1600px}.container-fluid .img-responsive{margin:0 auto}.caret.rotate-left{transform:rotate(270deg)}.navbar-fixed-top .pull-right img{margin-top:15px;margin-left:30px}.keyvisual{height:285px;overflow:hidden;position:relative}.carousel-inner{height:100%}.keyvisual img{position:absolute}.slider img:not(:first-of-type){display:none}@media screen and (min-width:768px){.subaru_logo{margin-top:12px;width:149px;height:25px;background-image:url('../images/subaru_logo.png')}.daihatsu_logo{width:150px;height:25px;margin-left:15px;margin-top:12px;background-image:url('../images/daihatsu_logo.png')}}@media(max-width:767px){#main-navbar{position:absolute;left:80px}.navbar-collapse.in{overflow-y:visible}#main-navbar a.dropdown-toggle{display:block}#main-navbar ul.dropdown-menu{float:left}.container>.navbar-header{margin:0}.subaru_logo{margin-top:12px;width:48px;height:25px;background-image:url('../images/subaru_logo.png')}.daihatsu_logo{width:42px;height:25px;margin-left:15px;margin-top:12px;background-image:url('../images/daihatsu_logo.png')}}@media(max-width:642px){#footer .ahd{display:none}}
|
||||
body{padding:50px 0 100px 0;font-family:Verdana,Arial,sans-serif;text-align:justify}li.dropdown-submenu{position:relative}li.dropdown-submenu:hover>ul.dropdown-menu{display:block}li.dropdown:hover>ul.dropdown-menu{display:block}ul.dropdown-menu.pull-left{margin-top:-6px;border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;top:0;left:100%}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:bold}#footer h3{text-decoration:underline}#footer:hover .navbar-brand{height:auto}#footer .navbar-brand{margin-left:0}#footer .navbar-brand p{font-size:14px}.container-fluid{max-width:1600px}.container-fluid .img-responsive{margin:0 auto}.caret.rotate-left{transform:rotate(270deg)}.navbar-fixed-top .pull-right img{margin-top:15px;margin-left:30px}.keyvisual{height:285px;overflow:hidden;position:relative}.carousel-inner{height:100%}.keyvisual img{position:absolute}.slider img:not(:first-of-type){display:none}.car-color img:not(:first-of-type){display:none}.car-color-thumbs img{padding:0 15px}.thumbnail{-webkit-box-shadow:none;box-shadow:none;border:0}.thumbnail .caption{padding-left:0;padding-right:0}.caption{text-align:left}@media screen and (min-width:768px){.subaru_logo{margin-top:12px;width:149px;height:25px;background-image:url('../images/subaru_logo.png')}.daihatsu_logo{width:150px;height:25px;margin-left:15px;margin-top:12px;background-image:url('../images/daihatsu_logo.png')}}@media(max-width:767px){#main-navbar{position:absolute;left:80px}.navbar-collapse.in{overflow-y:visible}#main-navbar a.dropdown-toggle{display:block}#main-navbar ul.dropdown-menu{float:left}.container>.navbar-header{margin:0}.subaru_logo{margin-top:12px;width:48px;height:25px;background-image:url('../images/subaru_logo.png')}.daihatsu_logo{width:42px;height:25px;margin-left:15px;margin-top:12px;background-image:url('../images/daihatsu_logo.png')}}@media(max-width:642px){#footer .ahd{display:none}}
|
||||
52
js/ahd.js
52
js/ahd.js
@@ -7,13 +7,16 @@
|
||||
*/
|
||||
|
||||
$(document).ready(function () {
|
||||
carColor.init();
|
||||
slider.init();
|
||||
kenBurns.init();
|
||||
thumbPage.init();
|
||||
});
|
||||
|
||||
$(window).resize(function () {
|
||||
slider.initVariables();
|
||||
kenBurns.initVariables();
|
||||
thumbPage.init();
|
||||
});
|
||||
|
||||
var slider = {
|
||||
@@ -365,3 +368,52 @@ var kenBurns = {
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var carColor = {
|
||||
activePreview: 0,
|
||||
previewElement: null,
|
||||
previewImages: null,
|
||||
thumbElement: null,
|
||||
thumbImages: null,
|
||||
|
||||
|
||||
init: function () {
|
||||
carColor.initVariables();
|
||||
carColor.thumbImages.on('mouseenter', function () {
|
||||
$(carColor.previewImages.get(carColor.activePreview)).hide();
|
||||
carColor.activePreview = parseInt($(this).data('thumb'));
|
||||
$(carColor.previewImages.get(carColor.activePreview)).css('display', 'block');
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
initVariables: function () {
|
||||
carColor.previewElement = $('.car-color');
|
||||
carColor.previewImages = $('img', carColor.previewElement);
|
||||
carColor.thumbElement = $('.car-color-thumbs');
|
||||
carColor.thumbImages = $('img', carColor.thumbElement);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var thumbPage = {
|
||||
init: function () {
|
||||
var thumbElement = $('.thumbPage');
|
||||
var thumbImages = $('.thumbnail', '.thumbPage');
|
||||
var left = 0;
|
||||
|
||||
if (thumbElement.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$('.clearfix', thumbElement).remove();
|
||||
|
||||
$.each(thumbImages, function(key, image) {
|
||||
if($(image).offset().left <= left) {
|
||||
$(image).parent().before('<div class="clearfix"></div>');
|
||||
}
|
||||
left = $(image).offset().left;
|
||||
});
|
||||
}
|
||||
};
|
||||
23
rendering/Model/CarColorModel.php
Normal file
23
rendering/Model/CarColorModel.php
Normal file
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
/**
|
||||
* Created by CS medien- & kommunikationssysteme.
|
||||
* @author Christian Steinle
|
||||
* @date 09.01.2017
|
||||
*
|
||||
* @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
|
||||
*/
|
||||
|
||||
namespace Model;
|
||||
|
||||
|
||||
use Helper\Database;
|
||||
|
||||
class CarColorModel extends Database
|
||||
{
|
||||
const TBL_NAME = TBL_CAR_COLOR;
|
||||
|
||||
const PRIMARY_KEY = 'carColorID';
|
||||
|
||||
const ORDER_BY = '';
|
||||
|
||||
}
|
||||
23
rendering/Model/ThumbModel.php
Normal file
23
rendering/Model/ThumbModel.php
Normal file
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
/**
|
||||
* Created by CS medien- & kommunikationssysteme.
|
||||
* @author Christian Steinle
|
||||
* @date 09.01.2017
|
||||
*
|
||||
* @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
|
||||
*/
|
||||
|
||||
namespace Model;
|
||||
|
||||
|
||||
use Helper\Database;
|
||||
|
||||
class ThumbModel extends Database
|
||||
{
|
||||
const TBL_NAME = TBL_THUMB;
|
||||
|
||||
const PRIMARY_KEY = 'thumbID';
|
||||
|
||||
const ORDER_BY = '';
|
||||
|
||||
}
|
||||
44
templates/carcolor.phtml
Normal file
44
templates/carcolor.phtml
Normal file
@@ -0,0 +1,44 @@
|
||||
<?php
|
||||
$registry = \Helper\Registry::getInstance();
|
||||
$imagePath = $registry->editorConfig['mediaPrefix'] . $registry->navID . '/';
|
||||
$imageData = json_decode($this->data['carColorImages']);
|
||||
|
||||
$images = array();
|
||||
$thumbs = array();
|
||||
|
||||
$editorData = '';
|
||||
if ($this->isEditable === true)
|
||||
{
|
||||
$editorData = ' data-editor="CarColor" data-id="' . $this->data['carColorID'] . '" data-element="CarColor_' . $this->data['carColorID'] . '"';
|
||||
}
|
||||
|
||||
?>
|
||||
<div class="row"<?php echo $editorData; ?>>
|
||||
<div class="col-md-12 car-color">
|
||||
<?php
|
||||
foreach ($imageData as $key => $image)
|
||||
{
|
||||
$imageName = explode('.', $image);
|
||||
$extension = '.' . end($imageName);
|
||||
$thumb = str_replace($extension, '-thumb' . $extension, $image);
|
||||
$thumbs[] = '<img data-thumb="' . $key . '" src="' . $imagePath . $thumb . '"/>';
|
||||
|
||||
?>
|
||||
<img class="center-block img-responsive" data-image="<?php echo $key; ?>" src="<?php echo $imagePath . $image; ?>"/>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="col-md-12 car-color-thumbs text-center">
|
||||
<?php
|
||||
|
||||
foreach ($thumbs as $thumb)
|
||||
{
|
||||
echo $thumb;
|
||||
}
|
||||
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12"> </div>
|
||||
|
||||
43
templates/thumb.phtml
Normal file
43
templates/thumb.phtml
Normal file
@@ -0,0 +1,43 @@
|
||||
<?php
|
||||
$registry = \Helper\Registry::getInstance();
|
||||
$imagePath = $registry->editorConfig['mediaPrefix'] . $registry->navID . '/';
|
||||
$images = json_decode($this->data['thumbImages']);
|
||||
$headlines = json_decode($this->data['thumbHeadlines']);
|
||||
$texts = json_decode($this->data['thumbTexts']);
|
||||
|
||||
$editorData = '';
|
||||
if ($this->isEditable === true)
|
||||
{
|
||||
$editorData = ' data-editor="Thumb" data-id="' . $this->data['thumbID'] . '" data-element="Thumb_' . $this->data['thumbID'] . '"';
|
||||
}
|
||||
|
||||
?>
|
||||
<div class="row thumbPage"<?php echo $editorData; ?>>
|
||||
<?php
|
||||
foreach ($images as $key => $image)
|
||||
{
|
||||
?>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<div class="thumbnail">
|
||||
<img src="<?php echo $imagePath . $image; ?>"/>
|
||||
<div class="caption">
|
||||
<p><b><?php echo $headlines[$key]; ?></b></p>
|
||||
<?php
|
||||
|
||||
if (isset($texts[$key]))
|
||||
{
|
||||
?>
|
||||
<p><?php echo $texts[$key]; ?></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="row"> </div>
|
||||
|
||||
Reference in New Issue
Block a user