Search code examples
javascriptphpjqueryhtmlbxslider

How can I append address to <a> tag href


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

      });
    };

Solution

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