Backstretch: voeg div toe aan slide
Ik zie in hun documentatie wel iets staan van backstretch.before.
Maar ik snap niet helemaal of dit wel doet wat ik wil. (en of ik het goed toepas..)
Ik heb nu dit, wat niet werkt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
$.backstretch([
"<?php echo $bg_image1;?>"
, "<?php echo $bg_image2;?>"
, "<?php echo $bg_image3;?>"
], {duration: 14000, fade: 750});
$(window).on("backstretch.before", function (e, instance, index) {
if (index === 1) {
$('#image_link').html('<p>Test link</p>');
};
});
});
$.backstretch([
"<?php echo $bg_image1;?>"
, "<?php echo $bg_image2;?>"
, "<?php echo $bg_image3;?>"
], {duration: 14000, fade: 750});
$(window).on("backstretch.before", function (e, instance, index) {
if (index === 1) {
$('#image_link').html('<p>Test link</p>');
};
});
});
Gewijzigd op 04/07/2013 20:07:59 door N K
Twee vragen
- Waar komt de informatie van? Is er een verband tussen een afbeelding en de hyper link die daarbij hoort?
Gewoon ergens een array plaatsen of zo, veronderstel ik.
- Waar moet die hyper link komen?
Als ik het goed begrijp, regelt die backstretch images.
Mijn eerste gedacht is om die backstretch.before enkel te gebruiken als een trigger, verder integreren we die link gewoon in gewone HTML elementen. Tja, zoals je zelf probeerde, lijkt me.
Ik zal al eens zien hoe dat allemaal werkt.
Ik weet niet of het zo mooi is maar hij doet wat het moet doen ;-)
Code (php)
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
var images = [
<?php while( $row = mysqli_fetch_assoc($results) ){
echo '"img/'.htmlspecialchars($row['img_path']). '",';
$img_link[]= htmlspecialchars($row['img_link']);
$img_description[] = htmlspecialchars($row['img_description']);
};?>
];
var index = 0;
$.backstretch(images, {speed: 500});
$(window).on("backstretch.show", function (e, instance) {
<?php
for($i=0;$i<sizeof($img_link);$i++)
{
echo "if (instance.index === ".$i. ") {
$('#image_link').html('<a class=\"a_reset\" href=\"".$img_link[$i]."\">".$img_description[$i]."</a>');
}";
}?>
});
</script>
var images = [
<?php while( $row = mysqli_fetch_assoc($results) ){
echo '"img/'.htmlspecialchars($row['img_path']). '",';
$img_link[]= htmlspecialchars($row['img_link']);
$img_description[] = htmlspecialchars($row['img_description']);
};?>
];
var index = 0;
$.backstretch(images, {speed: 500});
$(window).on("backstretch.show", function (e, instance) {
<?php
for($i=0;$i<sizeof($img_link);$i++)
{
echo "if (instance.index === ".$i. ") {
$('#image_link').html('<a class=\"a_reset\" href=\"".$img_link[$i]."\">".$img_description[$i]."</a>');
}";
}?>
});
</script>