Link to a specific slide in carousel on different page?

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
User avatar
Bluesman
 
 
Posts: 1157
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Link to a specific slide in carousel on different page?

Post by Bluesman »

Hi Pablo or other, hope you have a good start in 2022 :D
I think I have seen how to do this before... but can not find the post. I know how to make full page links to the different slides in a carousel, but what I''m now trying to do is:
Having a slideshow on one page where the different slides shall link to corresponding slide on a different page in the same project. See this page where I have the first slide linked:
https://www.chevere.ec/archivoblomberg/tienda.html
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 22476
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Link to a specific slide in carousel on different page?

Post by Pablo »

I'm sorry, there is no option for this.
User avatar
Bluesman
 
 
Posts: 1157
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Link to a specific slide in carousel on different page?

Post by Bluesman »

Pablo wrote: Sun Jan 09, 2022 6:41 pm I'm sorry, there is no option for this.
Ok, tnx for rapid answer on a sunday :)
Was looking for an extension (photo library or slider) that would do the same... but didn't find. Maybe you or someone else know about an extension that do the same as my example?
Otherwise I do the hard way... making a separate page for each slide... :)
"Make My Day"

See my Website
Joe_120
 
 
Posts: 30
Joined: Fri May 21, 2021 3:10 pm
Location: Cornwall

Re: Link to a specific slide in carousel on different page?

Post by Joe_120 »

Better late than never. I have a couple of hacks for this which work with the Bootstrap Carousel and the Slideshow:

For both the Bootstrap Carousel and Slideshow on the page you want to link from:
Link each image to External Web address and enter the page id and slide number in this format

Code: Select all

page2.html#s1
----------------------------------------------------------------------------------------------------------------------------------------------------

On the page you are linking to for the Bootstrap Carousel insert two html frames:
Frame 1 with setting "Beween <head></head> tags" enter the following

Code: Select all

<script>
$(document).ready(function(){

    if(window.location.hash == '#s1'){
        $("#s1").trigger("click");
    }
    
    if(window.location.hash == '#s2'){
        $("#s2").trigger("click");
    }
   

    if(window.location.hash == '#s3'){
        $("#s3").trigger("click");
    }
   

   if(window.location.hash == '#s4'){
        $("#s4").trigger("click");
    }

});
</script>
Note that each slide has it's own if block. Add/remove blocks as required and adjust numbering sequence.

Frame 2 with setting "After <body> tag" enter the following anchors:

Code: Select all

<a href="#" id="s1" data-target="#slider_10" data-slide-to="0"></a>
<a href="#" id="s2" data-target="#slider_10" data-slide-to="1"></a>
<a href="#" id="s3" data-target="#slider_10" data-slide-to="2"></a>
<a href="#" id="s4" data-target="#slider_10" data-slide-to="3"></a>
Note that slides start at 0 (zero) which is the first slide. Change slider_10 to your slider id but do not remove the #
--------------------------------------------------------------------------------------------------------------------------------------------------

On the page you are linking to for the Slideshow we're triggering the pagination to index the slides.

Use one html frame with setting "Between <head></head> tags" and enter

Code: Select all

script>
$(document).ready(function(){

    if(window.location.hash == '#s1'){
        $("#1").trigger("click");
    }
    
    if(window.location.hash == '#s2'){
        $("#2").trigger("click");
    }
   

    if(window.location.hash == '#s3'){
        
        $("#3").trigger("click");
    }
   

   if(window.location.hash == '#s4'){
        $("#4").trigger("click");
    }

});
</script>
Note that pagination id's are numbers begining with 1 (#1) which is the first slide. Each slide has it's own if block. Add/remove blocks as required and adjust numbering sequence.

Demo here https://linkcarousel.discoverproductivity.co.uk/

Hope this helps

Joe
If it wasn't for bad luck, I'd have no luck at all.
Post Reply