Adipoli jquery spraudnes pielietošana WordPress lapā
Adipoli ir jquery spraudnis no Joby Joseph, kas nodrošina papildus efektus bildēm uz Jūsu lapas. ADIPOLI DEMO
Pieejamas opcijas:
- startEffect : bildes pamatstils
- hoverEffect : bildes stils pie kursora novietošanas virs bildes
- imageOpacity : bildes caurspīdīgums, tika ņemts vērā kad ir pielietoti efekti: transparent vai overlay opcijai startEffect
- animSpeed : efektu animēšana ātrums
- fillColor : pildījumu krasa
- textColor : teksta krasa
- overlayText : tekts virs bildes
- slices : gabalu skaits slice animācijai
- boxCols : kvadratu skaits rindā box animācijai
- boxRows : rindu skaits box animācijai
- popOutMargin : atstarpe pie popout
- popOutShadow : Bildes ēnas lielums pie popout. Ēnas strādā tikai brouseros, kuri atbalsta CSS īpašību text-shadow.
Sakuma efekti:
- transparent
- normal
- overlay
- grayscale
Efekti pie kursora novietošanas virs bildes:
- normal
- popout
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpRandom
- sliceUpDown
- sliceUpDownLeft
- fold
- foldLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
Spraudnes oficiāla lapa: http://jobyj.in/adipoli/
Tātad lai to pielietotu to ir nepieciešams novietot pie Jūsu WordPress lapas failiem. ADIPOLI DOWNLOAD
Piemēram, zem child tēmas izveidosim mapi “js” un tur novietosim mūsu Adipoli spraudni. Adipoli spraudnes darbībai ir nepieciešams jquery ne mazāk par 1.7.1. versiju, tātad to ari ir nepieciešams nodrošināt.
Kad jquery 1.7.1 un Adipoli skripti ir izvietoti zem “js” mapes varam tos inicializēt. Lai tas izpildītu ir nepieciešams ierakstīt sekojošas rindas Jūsu functions.php datnē:
if(!function_exists("itower_scripts")) {
function itower_scripts() {
if( is_admin() )
return;
$template_url = get_template_directory_uri(); // if theme is used
$child_theme_url = get_stylesheet_directory_uri(); // if child theme is used
wp_register_script( '1.7.1', $child_theme_url. '/js/jquery-1.7.1.js', 'jquery');
wp_register_script( 'adipoli', $child_theme_url. '/js/jquery.adipoli.min.js', 'jquery' );
wp_register_script( 'adipimg', $child_theme_url. '/js/jquery.images.js', 'jquery');
wp_enqueue_script('1.7.1');
wp_enqueue_script('adipoli');
wp_enqueue_script('adipimg');
} }
add_action('init', 'itower_scripts');
Ja esiet uzmanīgi, tad pamanījāt, ka function.php kodā tiek inicializēts vēl viens papildus js skripts ar nosaukumu “adipimg”. Šis skripts pielieto izvēlētas Adipoli funkcijas bildēm ar .css klasu “img-adipoli”:
$(window).load(function () {
$('.img-adipoli').adipoli({
'startEffect' : 'grayscale',
'hoverEffect' : 'normal'
});
});
Papildus tam ir nepieciešams pilnveidot Jūsu WordPress lapas .css failu ar sekojošam rindām:
.adipoli-wrapper
{
margin:auto;
position:relative;
display: inline-block;
}
.adipoli-wrapper>img
{
position: absolute;
z-index: 1;
}
.adipoli-before
{
position: absolute;
z-index: 5;
}
.adipoli-after
{
position: absolute;
z-index: 10;
}
.adipoli-slice {
display:block;
position:absolute;
z-index:15;
height:100%;
}
.adipoli-box
{
display:block;
position:absolute;
z-index:15;
}
Tagad visām bildēm ar klasi .img-adipoli Adipoli spraudnis pielietos norādītas jquery.images.js skriptā funkcijas:
Atbildēt
Vēlies pievienoties diskusijai?Jūtieties brīvi, lai veicinātu!