ktomov
Premium
Понеже аз лично не успях да намеря подобен плъгин, а и наистина няма нужда от добавка за да се направи точно този ефект (пример http://mashable.com/2012/05/29/angry-birds-credit-cards/ слайдера в дясно след като скролнете към дъното), ето и едно елементарно решение с редакция на 2-3 файла.
Понеже ми стана интересно реших да потърся за алтернатива. Резултата на който попаднах е следния: http://erikvandeven.com/jquery/bottom-page-jquery-slide-box/
Проблема в случая е, че това не е готова добавка, а трябва да си го добавиш ръчно. Стъпките които ползвах аз:
1. Добавих effects.js файла в хедъра (header.php на темплейта ти) на сайта (под мястото където ти се зарежда jQuery, защото трябва jQuery да се зареди преди самия скрипт за ефекта. Дефакто хедъра трябва да ви изглежда горе долу така:
2. При мен се прояви конфликт с друга добавка за това на мястото на $ във effects.js сложих jQuery. Можете да копирате директно това което аз ползвам на мястото на функцията в изтегления effects.js
3. Редактира си файла style.css на темплейта ви и добавяте даденото като пример за стилизиране. Аз направих малко редакции за да излезе добре на моя темплейт, също добавих и z-index за да излиза над рекламите (ако се случи да попадне на същото място. Това е моя вид на стилизирането:
4. Качете двата файла effects.js и close-card.png в папката на темата си - wp-content/themes/your-theme
5. Редактирате файла си single.php и под the_content(); сложи следното: Редакция - стана ми прекалено натрапчиво и го сложих под <?php comments_template(); // show comments ?> за да се показва след като се стигне дъното на коментарите.
Това е маркера който ще активира слайдера. Ако искате можете да го сложиш и след коментарите - абе където и да е било - там където искате при скрол да се показва слайдера.
6. Добавете кода който искате да ти се показва във слайдера. В моя случай използвах елементарна функция за да ми се показват последните публикации от къстом пост тайп:
След <span>Read next</span> и преди <a href="#" class="close">close</a> можете да ползваш каквато искаш функция - такава за подобни публикации да речем (за това можеш да ползвате някоя добавка от wordpress архива). Аз ползвам проста заявка към базата данни за да се покажат последните 3 публикации и тъмбнейла им.
Запаметявате файла single.php и го качвате в папката на темплейта си.
Воала - желаният ефект е постигнат. Ето и при мен как изглежда: клик тук и скролни надолу.
Дано това освен на теб помогне и на друг
Няма нужда от екстра добавка специално за това. Елементарна редакция на 2-3 файла е.
Ако не сте изтеглили пакета на файловете от горния линк, направете го от тук - съдържа effects.js (с редакциите), mystyle.css (с редакциите) и close-card.png
Едит: Горното може да се ползва и за други системи, не е задължително да ползвате wordpress за да постигнете горният ефект!
Понеже ми стана интересно реших да потърся за алтернатива. Резултата на който попаднах е следния: http://erikvandeven.com/jquery/bottom-page-jquery-slide-box/
Проблема в случая е, че това не е готова добавка, а трябва да си го добавиш ръчно. Стъпките които ползвах аз:
1. Добавих effects.js файла в хедъра (header.php на темплейта ти) на сайта (под мястото където ти се зарежда jQuery, защото трябва jQuery да се зареди преди самия скрипт за ефекта. Дефакто хедъра трябва да ви изглежда горе долу така:
Код:
<?php wp_enqueue_script("jquery"); //load jquery ?>
<?php wp_head(); ?>
<script type="text/javascript" src="http://domain.com/wp-content/themes/your-theme/effects.js"></script>
</head>
Код:
jQuery(document).ready(function () {
jQuery(function() {
jQuery(window).scroll(function(){
var distanceTop = jQuery('p#last').offset().top - jQuery(window).height();
if (jQuery(window).scrollTop() > distanceTop)
jQuery('#slidebox').animate({'right':'0px'},300);
else
jQuery('#slidebox').stop(true).animate({'right':'-430px'},100);
});
jQuery('#slidebox .close').bind('click',function(){
jQuery('#slidebox').stop(true).animate({'right':'-430px'},100, function(){
jQuery('#slidebox').remove();
});
return false;
});
});
});
Код:
#slidebox{
width:400px;
height:195px;
z-index:99999;
padding:10px;
background-color:#ffffff;
position:fixed;
bottom:0px;
right:-420px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow: 0 4px 10px #555555;
}
#slidebox span{
font-size: 0.9em;
padding-bottom: 5px;
text-transform: uppercase;
}
#slidebox h2{
font-size: 1.0em;
}
#slidebox .next-article{
margin-top: 5px;
}
#slidebox .next-article a{
display: inline-block;
}
#slidebox .close{
background: url(close-card.png) no-repeat;
display: block;
height: 15px;
margin: 3px;
float: right;
width: 16px;
text-indent: -99999px;
}
#slidebox .close:hover{
background:transparent url(close-card.png) -16px 0px no-repeat;
}
#slidebox strong{
display: inline-block;
color: #000000;
font-family:"Verdana";
font-size:1.2em;
margin-left: 10px;
vertical-align: top;
max-width: 240px;
}5. Редактирате файла си single.php и под the_content(); сложи следното: Редакция - стана ми прекалено натрапчиво и го сложих под <?php comments_template(); // show comments ?> за да се показва след като се стигне дъното на коментарите.
Код:
<p id="last"></p>6. Добавете кода който искате да ти се показва във слайдера. В моя случай използвах елементарна функция за да ми се показват последните публикации от къстом пост тайп:
Код:
<div id="slidebox">
<span>Read next</span>
<div style="position: relative; margin: 0 auto; overflow: hidden;">
<?php query_posts('post_type=type_gallery&showposts=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<div style="margin: 0px 0px 0px 15px; display: inline-block;">
<a class="darken small<?php if($isvideo) { ?> video<?php } ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('article-slider', array( 'title'=> get_the_title() )); ?></a>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
<a href="#" class="close">close</a>
<div class="clear"></div>
</div>Запаметявате файла single.php и го качвате в папката на темплейта си.
Воала - желаният ефект е постигнат. Ето и при мен как изглежда: клик тук и скролни надолу.
Дано това освен на теб помогне и на друг
Няма нужда от екстра добавка специално за това. Елементарна редакция на 2-3 файла е.Ако не сте изтеглили пакета на файловете от горния линк, направете го от тук - съдържа effects.js (с редакциите), mystyle.css (с редакциите) и close-card.png
Едит: Горното може да се ползва и за други системи, не е задължително да ползвате wordpress за да постигнете горният ефект!
