CD2H gitForager

Scout24/showcar-pictures

Name: showcar-pictures

Owner: AutoScout24

Description: This module provides a easy to use vanilla js gallery library

Created: 2016-06-29 13:57:50.0

Updated: 2016-11-14 20:17:41.0

Pushed: 2017-11-15 15:07:08.0

Homepage: https://autoscout24.github.io/showcar-pictures/

Size: 363

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

showcar-pictures

This module provides a easy to use vanilla js gallery library with previews and full screen view. Actually it is just a wrapper that handles the communication between two showcar-carousel components.

Usage

Live example:

Visit the example on github pages.

Local example:

Just run the following command in the root of the carousel library.

pm start

This will open a small express server on your local machine where you can see the running example.

Visit: http://localhost:8080

HTML Code

See the following example below:

 id="my-pics">
s24-pictures class="as24-pictures">
<div class="as24-pictures__container">

  <!-- Header -->
  <div class="as24-pictures__header">
    <div class="as24-pictures__header-line">
      <h2 class="as24-pictures__picture-title"><!-- The main title of the gallery --></h2>
      <i class="as24-pictures__fullscreen-close"><!-- close button text --></i>
    </div>
    <div class="as24-pictures__header-line">
      <h5 class="as24-pictures__picture-subtitle"><!-- The secondary title of the gallery --></h5>
    </div>
  </div>
  <!-- / Header -->

  <div class="as24-pictures__content">
    <div class="as24-pictures__slider-container">

      <!-- Slider -->
      <as24-carousel class="as24-pictures__slider" role="slider" loop="infinite">
        <div class="as24-carousel__container" role="container">
          <div class="as24-carousel__item">
            <!-- the content of a slider item -->
          </div>
        </div>
        <a href="#" class="as24-carousel__button" role="nav-button" data-direction="left"></a>
        <a href="#" class="as24-carousel__button" role="nav-button" data-direction="right"></a>
        <div class="as24-carousel__indicator" role="indicator">2/7</div>
      </as24-carousel>
      <!-- / Slider -->

      <!-- Thumbnails -->
      <as24-carousel role="thumbnails" class="as24-pictures__thumbnails">
        <div class="as24-carousel__container" role="container">
          <div class="as24-carousel__item">
            <!-- the content of a thumb item -->
          </div>
        </div>
        <a href="#" class="as24-carousel__button as24-carousel__button--hidden" role="nav-button" data-direction="left"></a>
        <a href="#" class="as24-carousel__button" role="nav-button" data-direction="right"></a>
      </as24-carousel>
      <!-- / Thumbnails -->

    </div>

    <!-- Additional info -->
    <aside class="as24-pictures__info">
      <!-- description, ads, whatever -->
    </aside>
    <!-- / Additional info -->

  </div>
</div>
as24-pictures>
v>

Note: The number of the thumbnails and the number of slides MUST be the same!

CSS Styling

As to styles, you only have to specify these:

pics .as24-pictures__slider .as24-carousel__item {
dth: 640px;
ight: 480px;


pics .as24-pictures--fullscreen .as24-pictures__slider .as24-carousel__item {
ight: auto;

Custom Events

The library triggers following custom events with event.detail:

as24-pictures.fullscreen - when fullscreen mode is toggled
```
lscreen: true
```
as24-pictures.slide - when the image of the slider has been changed
```
ection: "right",
lscreen: true,
 "",
ex: 6,
e: "slider"
```

Installation

How to install:

To install showcar-pictures within your project use npm.

pm install showcar-pictures --save

Afterwards you need to add some css and js to your page.

k rel="stylesheet" href="../dist/showcar-pictures.css">

tml
ipt src="../dist/showcar-carousel.js"></script>

Note: The showcar-pictures depends on the showcar-carousel component.

Contributing

How to contribute:

Fork this repository.
Then install the required dependencies.
```
pm install
```
Start the dev server.
```
pm run dev
```
Visit http://localhost:8080

Note: changes will automatically build and refresh the browser.

Contribute

Save your changes and run $> npm prod.

Commit your code and the compiled libraries in ./dist. Then create a pull-request.

License

MIT License