Potrzebuje przygotować:
Jest to sekcja dla dwoch osob i ich opisów, przypomina w pewien sposób slider
aktualnie mam to tragicznie zrobione z faktu na brak czasu, zrobilem totalnie prowizoryczna funkcjonalnosc. polegajaca ze po kliknieciu szarego obrazka zmienia zostaje ukryty duzy i maly a zaladowany zostaje druga osoba (odkryta)
skrypt js (tragiczny)
Kod
function slider(){
$('.kasia_s').bind('click', function(event){
event.preventDefault();
$('.kasia_l').fadeIn();
$('.ryszard_l').hide();
$('.kasia_s').hide();
$('.ryszard_s').fadeIn();
$('#kasia').fadeIn();
$('#ryszard').hide();
});
$('.ryszard_s').bind('click', function(event){
event.preventDefault();
$('.ryszard_l').fadeIn();
$('.kasia_l').hide();
$('.kasia_s').fadeIn();
$('.ryszard_s').hide();
$('#ryszard').fadeIn();
$('#kasia').hide();
});
}
$('.kasia_s').bind('click', function(event){
event.preventDefault();
$('.kasia_l').fadeIn();
$('.ryszard_l').hide();
$('.kasia_s').hide();
$('.ryszard_s').fadeIn();
$('#kasia').fadeIn();
$('#ryszard').hide();
});
$('.ryszard_s').bind('click', function(event){
event.preventDefault();
$('.ryszard_l').fadeIn();
$('.kasia_l').hide();
$('.kasia_s').fadeIn();
$('.ryszard_s').hide();
$('#ryszard').fadeIn();
$('#kasia').hide();
});
}
kod sekcji:
Kod
$team = new WP_query(
array(
'post_type' => 'team',
'order' => 'ASC',
'orderby' => 'menu_order',
'posts_per_page' => -1
)
);
$i = 1;
$photo_array = array();
?>
<?php if ($team->have_posts()) : ?>
<?php while ($team->have_posts()) : $team->the_post() ?>
<?php $photo_array[$i] = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );;
$i++; ?>
<?php endwhile; ?>
<?php endif; ?>
<div class="row">
<div class="col-xs-12 col-sm-7 ">
<div class="slider">
<div class="large">
<img class="kasia_l img-responsive" src="<?php print_r($photo_array[1]);?>" />
<img class="ryszard_l img-responsive" src="<?php print_r($photo_array[2]);?>" />
<div class="small">
<img class="ryszard_s img_small img-responsive" src="<?php print_r($photo_array[2]);?>" />
<img class="kasia_s img_small img-responsive" src="<?php print_r($photo_array[1]);?>" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<?php if ($team->have_posts()) : ?>
<?php while ($team->have_posts()) : $team->the_post() ?>
<?php $ID = get_post_meta(get_the_ID(), '_id_name', true)?>
<div id="<?php echo $ID ?>">
<div class="title">
<h3><?php the_title() ?> <span>CEO</span></h3>
<?php $position = get_post_meta(get_the_ID(), '_position_name', true)?>
<span><?php echo $position ?></span>
</div>
<p>
<?php the_content() ?>
</p>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
array(
'post_type' => 'team',
'order' => 'ASC',
'orderby' => 'menu_order',
'posts_per_page' => -1
)
);
$i = 1;
$photo_array = array();
?>
<?php if ($team->have_posts()) : ?>
<?php while ($team->have_posts()) : $team->the_post() ?>
<?php $photo_array[$i] = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );;
$i++; ?>
<?php endwhile; ?>
<?php endif; ?>
<div class="row">
<div class="col-xs-12 col-sm-7 ">
<div class="slider">
<div class="large">
<img class="kasia_l img-responsive" src="<?php print_r($photo_array[1]);?>" />
<img class="ryszard_l img-responsive" src="<?php print_r($photo_array[2]);?>" />
<div class="small">
<img class="ryszard_s img_small img-responsive" src="<?php print_r($photo_array[2]);?>" />
<img class="kasia_s img_small img-responsive" src="<?php print_r($photo_array[1]);?>" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<?php if ($team->have_posts()) : ?>
<?php while ($team->have_posts()) : $team->the_post() ?>
<?php $ID = get_post_meta(get_the_ID(), '_id_name', true)?>
<div id="<?php echo $ID ?>">
<div class="title">
<h3><?php the_title() ?> <span>CEO</span></h3>
<?php $position = get_post_meta(get_the_ID(), '_position_name', true)?>
<span><?php echo $position ?></span>
</div>
<p>
<?php the_content() ?>
</p>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
Teraz w czym mam problem. Jak najlepiej rozwiązać takie coś by to miało rece i nogi.