A Vue.js component that provides a scrolling navigation across a set of images
nav-image-comp
nav-image-comp is a Vue.js (>=3.2) that provides navigation and display of a list of submitted images. Thumbnails of the images are displayed across the top with a horizontal scroll bar appearing below if necessary. By simply hovering over a thumbnail, a large preview rendition of the image is displayed. Images can be quickly reviewed with the combination of horizontal scrolling and hovering over the thumbnails.
nav-image-comp can be installed via with the included package.json file for a local installation via the npm install command. nav-image-comp depends on the vue.js framework. A demo folder is provided that used Parcel together with its associated package.json file to bundle together nav-image-comp along with its vue.js dependency for a simple application. Further details are provided below for running the demo.
Props
A prop in Vue.js is a custom attribute for passing information from a parent component hosting nav-image-comp instance(s) to an nav-image-comp as a child component. nav-image-comp has the following props for a parent to bind and send information to:
heading — a heading to be displayed above the thumbnail horizontal image list (string,default: null)
sources — an array of file paths to set the component’s image sources (array,default: null)
containerWidth — a number that defines the overall width dimension of the component (Number, default: 900)
cssVariables — defines the css variables for nav-image-comp (object, default: null)
Styling
The cssVariables prop is a javascript object that contains any combination of css variable names as keys and associated values. The following list are the css variable names along with their default values for a quick styling of nav-image-comp:
{
navimage_comp_font_family: 'Verdana,serif',
navimage_comp_background_color: '#222',
navimage_comp_heading_color: 'white',
navimage_comp_heading_font_size: '1.5rem',
navimage_comp_heading_font_weight: 'bold',
navimage_comp_thumbnail_selected_border: '4px solid gold'
}
Events
nav-image-comp has one event that notifies the parent component of the current selected image source:
'navImageCompCurrentSource' --- returns the current selected image's source
The parent component can listen to the above event and provide a callback for further processing. Events emitted from a child component back to the parent is explained at Vue Custom Events.
The demonstration shows how the event can be incorporated.
Demonstration
One demonstration of nav-image-comp is provided in the folder named demo/dist-prod and can be viewed by hosting the index.htmlfile. The demo (templated in the App.vue file) sets the sources of 10 jpeg image files.
As a suggestion, install http-server locally/globally via npm then enter the command http-serverin the nav-image-comp dist-prod directory. From a browser enter the url: localhost:8080/ to view the demo.
Here is some example code for using nav-image-comp taken from the App.vue file:
<div class='demo_container'>
<nav-image-comp
:sources="sources"
heading="Favorite Pictures"
@navImageCompCurrentSource="show_current_source">
</nav-image-comp>
</div>
And the supporting data references:
data: function() {
return {
sources:[
'images/img1.jpg',
'images/img2.jpg',
'images/img3.jpg',
'images/img4.jpg',
'images/img5.jpg',
'images/img6.jpg',
'images/img7.jpg',
'images/img8.jpg',
'images/img9.jpg',
'images/img10.jpg'
]
}
},
methods: {
show_current_source: function(source){
console.log(`Current Source: ${source}`)
}
}