This is a Vue 3 adaptation of react-magnifier, which is the original version. Someone else made a Svelte version, called svelte-magnifier as well.
<script setup lang="ts"> import VueMagnifier from '@websitebeaver/vue-magnifier' import '@websitebeaver/vue-magnifier/styles.css' </script> <template> <VueMagnifier src="./path/to/image" width="500" /> </template>
Any other props will be passed down to the <img> element. This way, you can e.g. add an alt attribute to the image.
.vue-magnifier__magnifier {
/* Styles for <div> around image and magnifying glass */
}
.vue-magnifier__magnifying-glass {
/* Styles for magnifying glass */
}
.vue-magnifier__magnifying-glass.vue-magnifier__circle {
/* Styles for magnifying glass circle */
}
.vue-magnifier__magnifying-glass.vue-magnifier__visible {
/* Styles for magnifying glass visible */
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4