I use bxslider4 and captions is enabled. I want to add link to captions. I done it some but it is applied for just first one. How can I append all links to each captions. I have edited bxslider javascript file.
My slider php code:
foreach ($manset_images as $man_img => $value2) {
?>
<div>
<a id="slayt_resim_link" href="index.php?url=content&id=<?=$value2->content_id; ?>">
<img src="<?php echo URL; ?>public/upload/<?=$value2->content_foto?>" title="<?=$value2->content_title?>" data-url="index.php?url=content&id=<?=$value2->content_id; ?>" style="width:100%; height: 350px;">
</a>
</div>
<?php
}
?>
I added below code to original bxslider javascript file to get image link and change caption href:
// find image link
var captionLink = $this(this)$(slayt_resim_link).attr('href');
$('#manset_caption_link').attr('href', captionLink);
This code provides apply for the first caption. I think I can solve the problem if I add captionLink to href=""
<a id="manset_caption_link" href="">
but I dont know How can I do.
Last state of the javascript code:
// bxslider javascript file 719. line
/**
* Appends image captions to the DOM
*/
var appendCaptions = function() {
// cycle through each child
slider.children.each(function(index) {
// get the image title attribute
var title = $(this).find('img:first').attr('title');
//------------------ added after ----------------------------
// find image link
var captionLink = $this(this)$(slayt_resim_link).attr('href');
$('#manset_caption_link').attr('href', captionLink);
//------------------------------------------------------------
// append the caption
if (title !== undefined && ('' + title).length) {
$(this).append('<div class="bx-caption"><a id="manset_caption_link" href="---Add captionLink---!!!!!"><span>' + title + '</span></a></div>');
}
});
};
I solved my problem. Now I can get the all links and append to eah captions.
My php code:
foreach ($manset_images as $man_img => $value2) { ?>
<div>
<a href="index.php?url=content&id=<?=$value2->content_id; ?>">
<img src="<?= URL; ?>public/upload/<?=$value2->content_foto?>" title="<?=$value2->content_title?>" data-url="index.php?url=content&id=<?=$value2->content_id; ?>" style="width:100%; height:350px;">
</a>
</div>
<?php
}
?>
bxslider js last state:
/**
* Appends image captions to the DOM
*/
var appendCaptions = function() {
// cycle through each child
slider.children.each(function(index) {
// get the image title attribute
var title = $(this).find('img:first').attr('title');
var captionLink = $(this).find('a:first').attr('href');
// append the caption
if (title !== undefined && ('' + title).length) {
$(this).append('<div class="bx-caption"><a id="manset_caption_link" href="'+ captionLink +'"><span>' + title + '</span></a></div>');
}
});
};