Backstretch: voeg div toe aan slide

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

N K

N K

04/07/2013 20:07:24
Quote Anchor link
Kan ik met backstretch op de een of andere manier met mijn slide ook een link toevoegen? Ik ben niet al te goed met javascript.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>');
    };
    });
});
Gewijzigd op 04/07/2013 20:07:59 door N K
 
PHP hulp

PHP hulp

16/07/2024 01:30:17
 
Kris Peeters

Kris Peeters

08/07/2013 16:33:24
Quote Anchor link
Ziet er wel leuk uit, die backstretch.

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.
 
N K

N K

08/07/2013 22:31:40
Quote Anchor link
ehm nou ik heb het werkend gekregen.
Ik weet niet of het zo mooi is maar hij doet wat het moet doen ;-)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.