Would it be possible to change the actual pages url when I go to the next/prev slide? Same way as it does on this forum when you scroll in a topic. The reason I want to do this to have a specific url (with the intial slide as a query parameter) for every image (slide) which can be then shared on social media.
Gabor
Hey @dogpoint,
I am thinking of a way but I have to test and play with it to solve it completely…
I would go with query parameter:
Setting a query parameter pageid (with the query manager swiperQuery ) and then on swiper’s change event pass the swiper.index to the query manager
dmx-on:change="swiperQuery.set('pageid',index)"
Then on page load check swiperQuery.data and load the query’s index to swiper…
swiper1.slideTo(swiperQuery.data.pageid)
Hope it works
Hi @famousmag
Thanks for your reply, I already had a query parameter with the index because I get to this page from a masonry and I use that query parameter to set the initial slide. Tried your idea, but instead of updating the url it adds another parameter with the same name.
After many versions I realised this is probably not the most efficient way to achieve what I want, just found https://sharethis.com/ which provides share buttons and they provide options to set the url (also image, title, description), so I ended up updating this parameter on swiper change and problem solved, all images in the slider have a unique url.
Thanks again!
Gabor
It’s kind of weird…
Let’s take it step by step my friend.
I assume you already have a Query Manager in your page.
You added in it a new parameter or you used a parameter that already existed in your query Manager?
In the same page you have a masonry and a swiper? Or from another page with a masonry on a click of a masonry item you ridert to the page with the swiper?
The same Query Parameter name you use for the Masonry and for the swiper?
If you can post a screenshot of your Query Manager Parameters and the events of the swiper.click and the page dmx-on:ready (or load)
EDIT: Nevermind, I just saw your post in this thread here:
2 pages, first with masonry (album images), the link on the images contains the masonry index as query parameter called “image”, then on the second page I have a swiper with the same data source as the masonry and I use the image query parameter as an initial slide value so when the user clicks on an image in the masonry, they will get to a big image in a swiper and they can navigate within the same dataset. Hope this make sense.
Now it looks like the variables under the swiper only available within the slide, so when I try to bind from the swiper rendered event (for the data detail), it doesn’t get a value. This is the reason I replied to Patrick on the other thread to find out if there is a way. Anyway tried your solution on swiper change event with a static value and this happened in the url:
The number 7 is the image parameter. After a change event:
I was hoping for an update, I assume there is a conflict with the routing but just a guess…
Also still not solved this perfectly, as if I add a new image to this album, the 7th image might be different, so I will need to have the image id somewhere in the url.
Gabor
This seems to me like a routing parameter subject…
I recreated it and worked fine but when I changed to routing I screwed up everything…
Unfortunately I have not any experience on routing so I cannot help you… 
I’ve been searching for a while but no luck.
This is a matter of how query parameters are assigned in a link (href) or through an event
We’ve updated the swiper component, to store the slide on change in a hash in your url, for example: https://site.com/gallery#slide1 - that’s something the swiperjs component offers but was not available until now in our component.
You can get the new files from here: dmxSwiper.zip (7.6 KB) and replace the existing ones in the dmxAppConnect/dmxSwiper folder.
Until that’s available in the UI you can use it the following way. To enable the functionality add hash-navigation="true" to the swiper like:
<div is="dmx-swiper" id="swiper1" hash-navigation="true">
And then on each slide add data-hash="slide1" -> replace slide1 part with whatever you want to appear when the specific slide is shown into view:
<div class="swiper-slide" data-hash="slide1">
// slide content here
</div>
Hi @Teodor
Thank for that, it is a great improvement of the swiper component, already found a good use for that.
Still not perfect for my (and probably all album-big image type) use case, as if an image gets shared on social media with a hashed link and then the image gets removed from the album, the link will be broken.
Did a bit of research over the weekend to see how other sites do this and the one I liked the most is unplash.com. What I assume they do is lets say you are in an album/collection (https://unsplash.com/t/wallpapers) and you click on an image, it opens a modal with a swiper like viewer and for the onrender and onchange events they change the url for a general photo url, eg. https://unsplash.com/photos/InweyY9Yqlo so when it gets shared, it always will be a good link even if the photo won’t be in that album/collection anymore. Also if the same image is in more than one album, there always will be just one url to every image, probably better for seo.
The disadvantage of this solution is that the shared url point to one photo only, not a photo in a album with navigation but since the album can be shared from the masonry view, I can live with that.
All in all the question still stands, how do I change the url from an event.
Not sure if there is a “wappler way”, but I found that this can be done using History API with a small javascript function. Based on this video, the script I need is history.replaceState(null, 'title', 'mynewurl'); which I called from a flow–>RunJS on the swiper onchange event, but gives an error on the browser:
Never used this before, so probably a very dumb mistake I made somewhere, but can you help me how do I run this js function?
Have a great week!
Gabor