TOPIC:

Responsive Cover Slider - Link entire image 3 years 7 months ago #207074

  • Topic Author
  • kayjay
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 28
  • Thanks: 0
I am using the Responsive Cover Slider as part of the Pulse Template. My client would like to make the entire slider image a link.

This is the website 181.224.152.92/

I have added the text links, and I have tried adding <a href="...."> tags in the code editor section of the module, but that didn't work. Does anyone know if there's any way to make the images links to articles or pages?

thanks,
Kj

Please Log in or Create an account to join the conversation.

Responsive Cover Slider - Link entire image 3 years 7 months ago #207108

  • MarioPuco's Avatar
  • MarioPuco
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 5958
  • Karma: 119
  • Thanks: 557
Hey,

So you want entire picture to be the link ? Not the text or anything else but picture itself ?

Regards,
Mario

Please Log in or Create an account to join the conversation.

Responsive Cover Slider - Link entire image 3 years 7 months ago #207157

  • Topic Author
  • kayjay
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 28
  • Thanks: 0
Yes, please

Please Log in or Create an account to join the conversation.

Responsive Cover Slider - Link entire image 3 years 7 months ago #207227

  • MarioPuco's Avatar
  • MarioPuco
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 5958
  • Karma: 119
  • Thanks: 557
ello,

Since we don't have an built-in option for this I made a little script that will add links to your image.
We are targeting each slider picture by it's source and wrapping it with HREF link :
jQuery("img[src='/images/article_images/For_New_Web/Family_Cartoon_rotator.gif").wrap( "<a href='http://google.com' target='_blank'></a>");
jQuery("img[src='/images/article_images/demo/بلا_ندم2_rotator.gif").wrap( "<a href='http://google.com' target='_blank'></a>");
jQuery("img[src='/images/article_images/demo/_2برنامج_الحق_rotator.gif").wrap( "<a href='http://google.com' target='_blank'></a>");
jQuery("img[src='/images/article_images/demo/Marriage.gif").wrap( "<a href='http://google.com' target='_blank'></a>");

You would need to change the href link in script above for each slide.

1 ) Make a new file inside /templates/pulse/js/ and call it custom.js
2 ) Inside /templates/pulse/index.php under line 412 add this : <?php $gantry->addScript("custom.js"); ?>

And that's it !

Let me know if you need help with this.
The following user(s) said Thank You: kayjay

Please Log in or Create an account to join the conversation.

Last edit: Post by MarioPuco.

Responsive Cover Slider - Link entire image 3 years 7 months ago #207260

  • Topic Author
  • kayjay
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 28
  • Thanks: 0
Thank you! I created the files like you directed but I could not get the linked slides to work.

Does all the code in the grey box go in the custom.js file? Or somewhere else?

Thank you again for your help.
Attachments:

Please Log in or Create an account to join the conversation.

Responsive Cover Slider - Link entire image 3 years 7 months ago #207281

  • MarioPuco's Avatar
  • MarioPuco
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 5958
  • Karma: 119
  • Thanks: 557
Hi,

Hmmm...when I enter the code I sent into browser console as you can see the links are added :



try to add this code to your custom.js :
jQuery( document ).ready(function() {
    jQuery("img[src='/images/article_images/For_New_Web/Family_Cartoon_rotator.gif").wrap( "<a href='http://google.com' target='_blank'></a>");
    jQuery("img[src='/images/article_images/demo/بلا_ندم2_rotator.gif").wrap( "<a href='http://google.com' target='_blank'></a>");
    jQuery("img[src='/images/article_images/demo/_2برنامج_الحق_rotator.gif").wrap( "<a href='http://google.com' target='_blank'></a>");
    jQuery("img[src='/images/article_images/demo/Marriage.gif").wrap( "<a href='http://google.com' target='_blank'></a>");
    
});

If this does not work, send me your credentials to support@crosstec.org so I can take a look at this.

Regards,
Mario
Attachments:
The following user(s) said Thank You: kayjay

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Moderators: ForumSupport
Time to create page: 0.121 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!