Insérer un diaporama javascript dans mon code
Bonjour j'ai un theme wordpress et je voudrais modifier le code pour que je puisse avoir un diaporama de 2 diapos qui change automatiquement dans la baniere de la page d'accueil. Je tente un code dans la partie du code BANNER et je veux pouvoir me servir aussi de certaine variable du code pour faire afficher selon l'image une description sur l'image avec la variable $kale_banner_description. Est-ce que quelqu'un peut m'aider avec ca?
MErci!
voici le code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| <?php
/**
* Frontpage Banner, Slider
*
* @package kale
*/
?>
<!-- Frontpage Banner / Slider -->
<?php
$kale_frontpage_banner = kale_get_option('kale_frontpage_banner');
$kale_example_content = kale_get_option('kale_example_content');
$kale_frontpage_banner_link_images = kale_get_option('kale_frontpage_banner_link_images');
?>
<?php
$force_banner = false;
/*** Posts Slider ***/
if ($kale_frontpage_banner == 'Posts') {
$kale_frontpage_posts_slider_category = kale_get_option('kale_frontpage_posts_slider_category');
$kale_frontpage_posts_slider_number = kale_get_option('kale_frontpage_posts_slider_number');
$args = array( 'posts_per_page' => $kale_frontpage_posts_slider_number, 'category' => $kale_frontpage_posts_slider_category );
$kale_posts_slider = get_posts( $args );
$n = count($kale_posts_slider);
if($n > 2) { #owl carousel limitation?
?>
<div class="frontpage-slider frontpage-posts-slider">
<div class="owl-carousel">
<?php foreach ( $kale_posts_slider as $post ) {
setup_postdata( $post );
$src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'kale-slider' ) ;
$featured_image = '';
if($src) $featured_image = $src[0];
else if($kale_example_content == 1) $featured_image = kale_get_sample('slide');
if($featured_image) { ?>
<div class="owl-carousel-item">
<?php if($kale_frontpage_banner_link_images == 0) { ?>
<img src="<?php echo esc_url($featured_image) ?>" alt="<?php the_title_attribute(); ?>" />
<div class="caption">
<p class="date"><?php echo get_the_date(); ?></p>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="read-more"><a href="<?php the_permalink(); ?>"><?php printf( _nx( '1 Comment', '%1$s Comments', get_comments_number(), 'comments title', 'kale' ), number_format_i18n( get_comments_number() ) ); ?></a></p>
</div>
<?php } else { ?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo esc_url($featured_image) ?>" alt="<?php the_title_attribute(); ?>" /></a>
<?php } ?>
</div>
<?php }
} wp_reset_postdata(); ?>
</div>
</div>
<?php
} else { $force_banner = true; }
}
/*** Banner ***/
if($kale_frontpage_banner == 'Banner' || $force_banner) {
$header_image = get_header_image();
$kale_banner_heading = kale_get_option('kale_banner_heading');
$kale_banner_description = kale_get_option('kale_banner_description');
$kale_banner_url = kale_get_option('kale_banner_url');
if($header_image != '') {
?>
<div class="frontpage-banner">
<img class="mySlides" src="img_rr_01.jpg" style="width:100%">
<img class="mySlides" src="img_rr_02.jpg" style="width:100%">
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 9000);
$header_image = 'mySlides'
if myIndex = 0
$kale_banner_description = 'Text A'
else
$kale_banner_description = 'Text B'
endif
<?php if($kale_frontpage_banner_link_images == 0) { ?>
<img src="<?php echo $header_image ?>" alt="<?php echo esc_attr($kale_banner_heading); ?>" />
<div class="caption">
<?php if($kale_banner_url != '' && $kale_banner_heading != '') { ?>
<h2><a href="<?php echo esc_url($kale_banner_url); ?>"><?php echo esc_html($kale_banner_heading); ?></a></h2>
<?php } ?>
<?php if($kale_banner_url == '' && $kale_banner_heading != '') { ?>
<h2><?php echo esc_html($kale_banner_heading); ?></h2>
<?php } ?>
<?php if($kale_banner_description != '') { ?>
<p class="read-more"><?php echo esc_html($kale_banner_description); ?></p>
<?php } ?>
</div>
<?php } else { ?>
<?php if($kale_banner_url != '') { ?><a href="<?php echo esc_url($kale_banner_url); ?>"><?php } ?>
<img src="<?php echo $header_image ?>" alt="<?php echo esc_attr($kale_banner_heading); ?>" />
<?php if($kale_banner_url != '') { ?></a><?php } ?>
<?php } ?>
</div>
}
</script>
<?php
}
}
?>
<!-- /Frontpage Banner / Slider --> |
