How to add a link to the description in vSlider

vSlider

vSlider is a very good and easy to use plugin. However I wanted a link in the description, which is not available in the options panel. Here is how I added a link to the description in vSlider.

It may not be the best solution, so you may use it at your own risk. For me it’s a temporary solution, because I expect this feature in the next verion (4.2). Updates will overwrite the changes below.

  1. Open vslider.php
  2. Go to line 999:
    [code]
    foreach( $randx as $x){ ?>
    <a href="<?php echo $options['link'.$x.'']; ?>" style="background:#fff;" target="<?php echo $options['target']; ?>">
    <?php
    if($options['timthumb']){
    $image = str_replace(get_bloginfo('siteurl'), '', $options['slide'.$x.'']);
    $img_url =WP_CONTENT_URL.'/plugins/vslider/timthumb.php?src='.urlencode($image).'&amp;w='.$options['width'].'&amp;h='.$options['height'].'&amp;zc=1&amp;q='.$options['quality'];
    }else{
    $img_url=$options['slide'.$x.''];
    }
    ?>
    <img src="<?php echo $img_url; ?>" style="width:<?php echo $options['width']; ?>px;height:<?php echo $options['height']; ?>px;" alt="<?php echo $options['heading'.$x.'']; ?>" />
    <?php if($options['heading'.$x.''] || $options['desc'.$x.'']) { ?>
    <span><h4><?php echo $options['heading'.$x.'']; ?></h4><?php echo $options['desc'.$x.'']; ?></span>
    <?php } ?>
    </a>
    [/code]
  3. Normally the link starts, then the image, then the title, then the description. I wanted nothing but the ‘read more’ link, so cut the first part of the link:
    [code]
    <a style="background: #fff;" href="<?php echo $options['link'.$x.'']; ?>" target="<?php echo $options['target']; ?>">
    [/code]
  4. and paste it between [code]<?php echo $options['desc'.$x.'']; ?>[/code] and [code]</span>
    <?php } ?>
    </a>[/code]
  5. It means the link now starts after the description. Because there is no text, there will be no link, so I added:
    [code]
    Lees&nbsp;verder&nbsp;&gt;&nbsp;&gt;
    [/code] (Dutch for ‘Read more’) after the pasted part
  6. That’s it, save vslider.php and upload it to your server.

Example can be found on the homepage of acupuncturist.nl

This is my version of the changed part of the code:

[code]
foreach( $randx as $x){ ?>
<?php
if($options['timthumb']){
$image = str_replace(get_bloginfo('siteurl'), '', $options['slide'.$x.'']);
$img_url =WP_CONTENT_URL.'/plugins/vslider/timthumb.php?src='.urlencode($image).'&w='.$options['width'].'&h='.$options['height'].'&zc=1&q='.$options['quality'];
}else{
$img_url=$options['slide'.$x.''];
}
?>
<img src="<?php echo $img_url; ?>" style="width:<?php echo $options['width']; ?>px;height:<?php echo $options['height']; ?>px;" alt="<?php echo $options['heading'.$x.'']; ?>" />
<?php if($options['heading'.$x.''] || $options['desc'.$x.'']) { ?>
<span><h4><?php echo $options['heading'.$x.'']; ?></h4><?php echo $options['desc'.$x.'']; ?> <a href="<?php echo $options['link'.$x.'']; ?>" style="background:#97141C; color:#fff !important;text-decoration:underline !important;font-weight:bold !important;" target="<?php echo $options['target']; ?>">Lees&nbsp;verder&nbsp;>&nbsp;></span>
<?php } ?>
</a>
[/code]

Please leave a comment if you need help or have improvements.

Edit: How to link the title and description

  1. Cut:
    [code][/code]
  2. and paste it between:
    [code]
    <span>
    [/code]
    and
    [code]
    <h4>
    [/code]

So the link no longer begins after the description, but before the title.

Reageren is niet mogelijk

© Campaan 2012 | Vaartsestraat 230 3511 TG Utrecht | Algemene voorwaarden‎ | KvK 30214053 | Btw NL161702715.B.01 | Gemaakt met WordPress en Nori Top