A Vue.js component that provides a scrolling navigation across a set of images

nav-image-comp

A Vue.js component that provides a scrolling navigation across a set of images

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}`)
    }
  }

GitHub

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram

Why do People Say: "Developers are Lazy"?
The saying “work smart, not hard” is applicable for programmers.
.
https://hackernoon.com/why-do-people-say-developers-are-lazy

.
Author: Aga Wozniak
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

Mitigating the DDOS Threats Facing Banks and Fintechs
As much as digitization and cyber simplified banking, the Fintech sector has left digital payment activity exposed to malicious and suspicious activity.
.
https://hackernoon.com/mitigating-the-ddos-threats-facing-banks-and-fintechs

.
Author: Josh Horowitz
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

24 Best JavaScript Blogs and Websites
In this overview, we have compiled a list of popular sites, as well as JS blogs that are worth reading and keeping in your bookmarks.
.
https://hackernoon.com/24-best-javascript-blogs-and-websites

.
Author: natashatsybliyenko
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

The Projects Working to Lower Ethereum Gas Fees
As more investors try their hand at DeFi, gas fees are shooting over the roof, making engaging with decentralized apps uneconomical for most users.
.
https://hackernoon.com/ethereum-gas-fees-are-there-any-projects-working-to-optimize-eth-gas-fees

.
Author: CryptoVirally SLR
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

On the Edge of a New Year: IT Predictions for 2022
The single biggest cause of network errors are people.
.
https://hackernoon.com/an-interview-with-uplogix-ceo-lisa-frankovitch

.
Author: Mignonette Garnier
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

How to Modernize IBM i Applications
If you’re like most IBM i users, you know how much value your IBM i data and applications bring to your business. Your end-users, however, may not. In today’s world of rich user experience, fast-paced application development, and constantly evolving customer expectations, IBM i applications are unde…
.
https://hackernoon.com/how-to-modernize-ibm-i-applications

.
Author: Lansa
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...