Разрабатывая собственный шаблон, столкнулся с проблемой вывода списка материалов на главной странице...
Проблему опишу в двух пунктах, что есть и что хотелось бы получить.
что есть...Переворачиваемый блок с новостью (кликая по нему он переворачивается и отображает краткое описание материала, а также кнопки "подробнее" и "закрыть"
(на картинке изображены 3 разных блока. Первый перевёрнутый, второй с наведённой мышкой и третий не активированный)Рабочий код скрипта переворачивания:
js<script type="text/javascript">
$(function(){
$.support.css3d = supportsCSS3D();
var container = $('#container');
$('.rotate').click(function(e){
container.toggleClass('flipped');
if(!$.support.css3d){
$('#front').toggle();
}
e.preventDefault();
});
function supportsCSS3D() {
var props = [
'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
], testDom = document.createElement('a');
for(var i=0; i<props.length; i++){
if(props[i] in testDom.style){
return true;
}
}
return false;
}
});
</script>
#container{
float: left;
width:321px;
height:323px;
margin:0 auto;
margin-right:12px;
margin-left:12px;
position:relative;
z-index:1;
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
}
#container{
position:absolute;
top:0;
left:0;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition:0.8s;
-webkit-transition:0.8s;
transition:0.8s;
}
#front{
border-bottom: 2px solid #226070;
width:100%;
height:100%;
background:url(images/diz2.png) #121212;
z-index:100;
}
#front:hover{
background:url(images/diz2.png) #226070;
}
#back{
border-bottom: 2px solid #226070;
width:100%;
height:100%;
background: #121212;
z-index:1;
opacity:0;
-moz-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#container.flipped #front{
opacity:0;
-moz-transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}
#container.flipped #back {
opacity:1;
-moz-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
скрипт работает только для одного блока.
что хотелось бы получить:1. чтобы при создании материала и пометки его как избранное он выводился в этом модуле, посредством создания нового блока.
2. возможность ставить картинку материала, которая отображалась бы только в этом модуле(по типу чёрно белой, как на рисунке выше, только для каждой новости разную)
3. ну и кнопка подробнее открывающая страницу материала целиком.
в чём трудности?во первых скрипт работает только для одного id и у меня не получается его переделать так что бы он работал для неограниченного числа блоков. получилось только его скопировать и менять название нужных мне id, что для вывода через движок не катит.(нужна помощь в переделки скрипта)
во вторых...
допустим я вывожу эти блоки через "список материалов категории" как управлять внешним видом списка я понял но вот как менять разметку? и как делать так чтобы создавался элемент при нажатии на который блок бы переворачивался?...
в общем очень много вопросов в реализации этого модуля, делаю что то подобное в первый раз, с php плохо знаком. надеюсь на компетентность и отзывчивость форумчан, буду раз внимательно выслушать любые мысли по данному вопросу, а также конкретные способы решения. Всем спасибо.
27.01.2025, 10:36:57