first attempt in disabling image coursel on redirect
This commit is contained in:
parent
e556e65707
commit
794817f69d
@ -21,7 +21,6 @@ onMount(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
|
const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
|
||||||
console.log(recipe)
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.card_anchor{
|
.card_anchor{
|
||||||
|
@ -2,15 +2,25 @@
|
|||||||
export let src
|
export let src
|
||||||
export let placeholder_src
|
export let placeholder_src
|
||||||
let isloaded=false
|
let isloaded=false
|
||||||
|
let isredirected=false
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const el = document.querySelector("img")
|
const el = document.querySelector("img")
|
||||||
if(el.complete){
|
if(el.complete){
|
||||||
isloaded = true
|
isloaded = true
|
||||||
}
|
}
|
||||||
|
fetch(src, { method: 'HEAD' })
|
||||||
|
.then(response => {
|
||||||
|
if(response.redirected){
|
||||||
|
isredirected = true
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
function show_dialog_img(){
|
function show_dialog_img(){
|
||||||
|
if(isredirected){
|
||||||
|
return
|
||||||
|
}
|
||||||
if(document.querySelector("img").complete){
|
if(document.querySelector("img").complete){
|
||||||
document.querySelector("#img_carousel").showModal();
|
document.querySelector("#img_carousel").showModal();
|
||||||
}
|
}
|
||||||
@ -160,11 +170,12 @@ dialog button{
|
|||||||
.zoom-in{
|
.zoom-in{
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<figure class="image-container">
|
<figure class="image-container">
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<div class:zoom-in={isloaded} on:click={show_dialog_img}>
|
<div class:zoom-in={isloaded && !isredirected} on:click={show_dialog_img}>
|
||||||
<div class=placeholder style="background-image:url({placeholder_src})" >
|
<div class=placeholder style="background-image:url({placeholder_src})" >
|
||||||
<div class=placeholder_blur>
|
<div class=placeholder_blur>
|
||||||
<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>
|
<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>
|
||||||
|
Loading…
Reference in New Issue
Block a user