Backstretch: voeg div toe aan slide

Door N K op 04-07-2013 20:07 gewijzigd op 04-07-2013 20:07

1.499 views

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:


$(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>');
	};
    }); 
});

Kris Peeters

08-07-2013 16:33

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

08-07-2013 22:31

ehm nou ik heb het werkend gekregen.
Ik weet niet of het zo mooi is maar hij doet wat het moet doen ;-)


<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>

Reageren

Inloggen om te reageren