Welcome Guest. Please Login or Register  
Client Area  |  Softaculous Cloud  |  Calendar  |  Quick Links  |  
   


You are here: Index > SitePad Website Builder > General Support > Topic : How to link slider images?



Threaded Mode | Print  

 How to link slider images? (7 Replies, Read 5696 times)
nancydrew
Posted on # January 22, 2018, 2:43 pm
Group: Member
Post Group: Newbie
Posts: 7
Status:
Hi,

How do I link the images in my slider to specific pages / URL? Please help. Thank you.
IP: --   

How to link slider images?
bearmatt
Posted on # January 23, 2018, 6:06 am | Post: 1
Group: Member
Post Group: Newbie
Posts: 33
Status:
Hi,

I tried to do the same. The following is perhaps a bit too complicated, but it may help - until someone else smarter figures out a proper/better answer.

** This will make every image in the slider go to only one link (eg a products page) **

Step 1:
In Sitepad > any page > Custom HTML (Click the hamburger link in the top right hand corner)
type the following code, then SAVE your change then CLOSE:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Step 2:
This will probably effect all/any image on the page it is embedded.. so you may have to move your slider into its own "Inner Row" and give it an id. Do this in the "Element unique ID" box in the style dialog box/window.

Once you have given it a unique id say eg homeSlider then you should be able to target just this id (#homeSlider) so that not every image on the page is affected by the script.

Step 3:
In the page that your slider is in, use your mouse to drag the </> Embed Code widget into your page, probably drag it into an area prior to the slider.

Type the following into "Past HTML code" section of the </> Embed Code widgets styling dialogue box

<script>
$(document).ready(function() {
    $("#homeSlider img").wrap('<a href="https://www.your-website.com/your-page.html" target="_blank"></a>');
});
</script>






IP: --   

How to link slider images?
bearmatt
Posted on # January 23, 2018, 9:07 am | Post: 2
Group: Member
Post Group: Newbie
Posts: 33
Status:
An amendment to my earlier post. Perhaps this is better (and a bit easier) to suit your needs and target every image in your slider (or on a page)

Step 1:
In Sitepad > any page > Custom HTML (Click the hamburger link in the top right hand corner)
type the following code: (then SAVE your change then CLOSE)

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Step 2:
In the page that your slider is in, use your mouse to drag the </> Embed Code widget into your page, probably drag it into an area prior to the slider.
Type the following into "Paste HTML code" section of the </> Embed Code widgets styling/dialogue box:

<script>
$(document).ready(function() {
$('[src="images/slider-image1.jpg"]').wrap('<a href="https://www.your-website.com/your-page1.html" target="_self"></a>');
$('[src="images/slider-image2.jpg"]').wrap('<a href="https://www.your-website.com/your-page2.html" target="_self"></a>');
$('[src="images/slider-image3.jpg"]').wrap('<a href="https://www.your-website.com/your-page3.html" target="_self"></a>');
$('[src="images/slider-image4.jpg"]').wrap('<a href="https://www.your-website.com/your-page4.html" target="_self"></a>');
});
</script>


** You will have to change the image filenames (eg images/slider-image1.jpg) to match the actual filenames in your slider
and you will have to change the links to actual pages/links on your site (eg https://www.your-website.com/your-page1.html)
The links could also be to another image if you wanted but you should then perhaps use target="_blank" so your image opens in a new window.
eg
$('[src="images/slider-image4.jpg"]').wrap('<a href="https://www.your-website.com/images/slider-image-big.jpg" target="_blank"></a>');
IP: --   

How to link slider images?
nancydrew
Posted on # January 26, 2018, 9:00 am | Post: 3
Group: Member
Post Group: Newbie
Posts: 7
Status:
Looks complicated since I don't have a background in coding, but I will try your suggestion @bearmatt. Thank you very much for the detailed, step-by-step explanation. Will post here my progress.
IP: --   

How to link slider images?
nancydrew
Posted on # January 27, 2018, 4:10 am | Post: 4
Group: Member
Post Group: Newbie
Posts: 7
Status:
@bearmatt Thank you very much for this solution - it works very well!
IP: --   

How to link slider images?
aakash_softac
Posted on # January 27, 2018, 7:32 am | Post: 5
Group: Member
Post Group: Super Member
Posts: 544
Status:
Hi,

Sorry for the delay in response. I was busy with debugging and testing SitePad so could not provide the solution.

The Solution provided by @bearmatt will work once the Site is published. You won't be able to test on the Editor the server since the image src has full URL when in Editor and Preview. Once the Site is published it will work as the URL changes to /images as we add all the images in /images directory.

We will try to add an option inside the Editor itself to add URL to Image Slider.

Do let us know if you need any other information.


Edited by aakash_softac : January 27, 2018, 7:33 am

-----------------------
Aakash Gupta
SitePad Developer

Follow us for faster updates
Twitter: https://twitter.com/sitepad_editor
Facebook: https://facebook.com/SitePad
IP: --   

How to link slider images?
Andy_T_13
Posted on # July 28, 2019, 5:23 am | Post: 6
Group: Member
Post Group: Newbie
Posts: 1
Status:
Hi aakash_softac

We will try to add an option inside the Editor itself to add URL to Image Slider.

This was Posted Jan 2018 has there been any success in adding the URL to the Image Slider or do we still use the HTML code?  All new to this so it would be easier than HTML!!!

Thanks Andy
IP: --   

How to link slider images?
aakash_softac
Posted on # August 2, 2019, 12:59 pm | Post: 7
Group: Member
Post Group: Super Member
Posts: 544
Status:
Hi,

We tried adding the option in the Editor itself but the current structure of SitePad does not allow adding this option. On forcefully adding the option it breaks the Image Slider widget.

Currently, the only option to use URL is using the HTML code.

Do let us know if you need any other information.

-----------------------
Aakash Gupta
SitePad Developer

Follow us for faster updates
Twitter: https://twitter.com/sitepad_editor
Facebook: https://facebook.com/SitePad
IP: --   

« Previous    Next »

Threaded Mode | Print  



Jump To :


Users viewing this topic
1 guests, 0 users.


All times are GMT. The time now is April 18, 2024, 9:34 pm.

  Powered By AEF 1.0.8 © 2007-2008 Electron Inc.Queries: 11  |  Page Created In:0.021