Image hotspot experiment using Vue and flickity carousel
In this post we will show you Image hotspot experiment using Vue and flickity carousel, hear for Image hotspot experiment using Vue and flickity carousel we will give you demo and example for implement.
Hear is Git hub like for Download, Demo and for information(Read More), it will help you into development and implement for Image hotspot experiment using Vue and flickity carousel. This link of git will give you document, instruction, installation and other information.
See the Pen Image Hotspot concept with Vue by Irko Palenius (@ispal) on CodePen.
Image Hotspot concept with Vue
Image hotspot experiment using Vue and flickity carousel,Not really optimized for mobile.
<p>Image hotspot experiment using Vue and flickity carousel - Vuejs</p> <a href="https://twitter.com/irkopal" class="twitter" target="_blank"> <span class="twitter__icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="640" height="640" viewBox="0 0 640 640"> <path d="M554.112 199.872c0.256 5.184 0.352 10.432 0.352 15.616 0 159.68-121.504 343.744-343.68 343.744-68.256 0-131.712-20-185.184-54.304 9.472 1.12 19.072 1.696 28.8 1.696 56.64 0 108.704-19.328 150.016-51.68-52.832-0.992-97.472-35.872-112.832-83.872 7.36 1.376 14.944 2.112 22.72 2.112 11.040 0 21.728-1.44 31.84-4.192-55.264-11.136-96.896-59.936-96.896-118.496 0-0.512 0-0.992 0-1.504 16.288 9.056 34.944 14.496 54.72 15.136-32.416-21.696-53.76-58.624-53.76-100.576 0-22.112 5.952-42.88 16.384-60.736 59.552 73.12 148.608 121.184 248.992 126.24-2.048-8.864-3.104-18.048-3.104-27.552 0-66.688 54.048-120.736 120.768-120.736 34.752 0 66.144 14.624 88.192 38.112 27.488-5.44 53.344-15.488 76.704-29.312-9.024 28.192-28.192 51.872-53.12 66.816 24.448-2.944 47.68-9.376 69.376-19.008-16.192 24.256-36.672 45.504-60.288 62.496z"></path> </svg> </span> <span class="twitter__name"> @irkopal </span> </a> <div id="app"></div>
const hotspots = [
{
title: 'iMac 27"',
description: 'Accuracy. Brightness. Clarity. Regardless of how you measure the quality of a display, Retina is in a class by itself. The pixel density is so high that you won’t detect a single one while using iMac. Text is so sharp, you’ll feel like you’re reading email and documents on a printed page.',
price: '$1,299.00',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/imac.png',
position: { top: '20%', left: '38%'}
},
{
title: 'Image hotspot experiment using Vue 2',
description: 'Featuring a new design, Magic Mouse 2 is completely rechargeable, so you’ll eliminate the use of traditional batteries. It’s lighter, has fewer moving parts thanks to its built-in battery and continuous bottom shell, and has an optimized foot design.',
price: '$99.00',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/magic-mouse.png',
position: { top: '85%', left: '75%'}
},
{
title: 'Magic Keyboard',
description: 'The Magic Keyboard combines a sleek new design with a built-in rechargeable battery and enhanced key features. With an improved scissor mechanism beneath each key for increased stability, as well as optimized key travel and a lower profile, the Magic Keyboard provides a remarkably comfortable and precise typing experience.',
price: '$79.00',
image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/magic-keyboard.png',
position: { top: '85%', left: '48%'}
}
]
const HotspotDetails = {
name: 'HotspotDetails',
template: `
<transition
name="detail"
@before-enter="beforeEnter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
>
<div class="hotspot-details">
<a href="#" @click.prevent="close" class="hotspot-details__close">
<svg class="icon icon-close" viewBox="0 0 24 24">
<path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"></path>
</svg>
</a>
<div class="hotspot-details__left">
<div class="hotspot-details__content">
<div class="carousel" ref="carousel">
<div class="carousel-cell" v-for="item in allItems">
<img :src="item.image" width="80%" />
</div>
</div>
</div>
</div>
<div class="hotspot-details__right">
<div class="hotspot-details__content">
<transition name="product-fade" mode="out-in">
<h3 class="hotspot-details__title animated" :key="selectedItem">{{ selectedItem.title }}</h3>
</transition>
<transition name="product-fade" mode="out-in">
<div class="hotspot-details__description animated" :key="selectedItem">{{ selectedItem.description }}</div>
</transition>
<transition name="product-fade" mode="out-in">
<div class="hotspot-details__price animated" :key="selectedItem">{{ selectedItem.price }}</div>
</transition>
</div>
</div>
<div class="hotspot-details__nav">
<a href="#" @click.prevent="selectProduct(index)" class="hotspot-details__nav-item" v-for="(item, index) in allItems">
<img :src="item.image" width="80%" />
</a>
</div>
</div>
</transition>
`,
props: {
item: { type: Object },
selectedIndex: { type: Number },
allItems: { type: Array }
},
data() {
return {
selectedItem: this.item
}
},
mounted() {
this.carousel = new Flickity(this.$refs.carousel, {
cellAlign: 'left',
contain: true,
draggable: false,
initialIndex: this.selectedIndex,
imagesLoaded: true,
prevNextButtons: false,
pageDots: false
});
this.carousel.on('select', this.onProductSelected);
},
beforeDestroy() {
setTimeout(() => {
this.carousel.off('select', this.onProductSelected);
this.carousel.destroy();
}, 600);
},
methods: {
close() {
this.$emit('close');
},
selectProduct(index) {
this.carousel.select(index);
},
onProductSelected() {
this.selectedItem = this.allItems[this.carousel.selectedIndex];
},
beforeEnter(el) {
el.style.setProperty(`--top`, this.item.position.top);
el.style.setProperty(`--left`, this.item.position.left);
},
afterEnter(el) {
el.classList.add('is-loaded');
},
beforeLeave(el) {
el.classList.remove('is-loaded');
}
}
}
const App = {
name: 'app',
components: {
HotspotDetails
},
template: `
<div class="app">
<div class="image-hotspot" :class="{'is-selected': open }">
<hotspot-details
:item="selectedHotspot"
:selected-index="selectedIndex"
:all-items="hotspots"
@close="closeDetails"
v-if="open"
></hotspot-details>
<transition-group name="hotspots">
<a
href="#"
class="hotspot-point"
v-for="(hotspot, index) in hotspotItems"
:style="{ top: hotspot.position.top, left: hotspot.position.left }"
@click.prevent="hotspotClicked(hotspot, index)"
:key="index"
>
<span :data-price="hotspot.price">
<svg class="icon icon-close" viewBox="0 0 24 24">
<path d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"></path>
</svg>
</span>
</a>
</transition-group>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/hotspot-image.jpg" alt="" @click="closeDetails">
</div>
</div>
`,
data () {
return {
hotspots,
open: false,
hotspotPosition: null,
selectedHotspot: null
}
},
computed: {
hotspotItems() {
return this.open ? [] : this.hotspots;
}
},
methods: {
closeDetails() {
this.open = false;
},
hotspotClicked(hotspot, index) {
this.selectedHotspot = hotspot;
this.selectedIndex = index;
this.open = true;
}
}
}
new Vue({
el: '#app',
components: {
App
},
render: h => h(App)
})
YOU ALSO LIKE RELATED POSTS
| Navigation Menu using vuejs | http://www.onlinecode.org/navigation-menu-using-vuejs/ |
| ckeditor vuejs 2 | http://www.onlinecode.org/vuejs-vuex-example/ |
| vuejs Sortable and Searchable Table Component | http://www.onlinecode.org/vuejs-sortable-searchable-table/ |
| Drag and Drop Multiple File Uploader VueJS 2 | http://www.onlinecode.org/drag-drop-multiple-file-uploader-vuejs-2/ |
| Vuejs build setup from scratch with webpack, vue-loader and hot reload | http://www.onlinecode.org/vue-js-build-set-scratch-webpack-vue-loader-hot-reload/ |
Hope this code and post will helped you for implement Image hotspot experiment using Vue and flickity carousel. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org
