Easy Any Content Lightbox & Gallery

PlayBox JS

PlayBox is a JavaScript library created by Deepak Kumar, This library helps to displays HTML, image slider by filling the screen and dimming out the web page.

This PlayBox Library does not use any other external Library, It also contains some of the polyfill jQuery functions.

Visit : PlayBox JS Demo

Getting Started

Download the Latest version of PlayBox from the GitHub release page

Download from: PlayBox GitHub Release

How to use:

  1. Include the playbox.js into your document, this PlayBox library injects necessary stylesheet into the document header when the page loads. you can override those values in custom css by !important property.

    <script src='playbox.js'></script>
    
    
  2. Create a div tag in the body section mentioned below, and you can use any number of boxes as with unique different containerName and buttonName, below are the examples of playbox use cases

    Note: The cssSelector mentioned in below examples also support PlayBox.getElement() and Javascript document selected Object

    HTML PlayBox - PlayBox.open()

        <div class="playbox containerName">
            <div class="container">
                ...
                ...
                ...
            </div>
        </div>
    
        <button class="buttonName">Click Me</button>
    
        <script type="text/javascript">
    
            PlayBox.open('.buttonName', '.containerName', 200, 300);
    
        </script>
    
    

    Note: 200, 300 are fadein and fadeout duration in milliseconds for box and it’s optional, the default duration is 300 milliseconds

    Image Slider PlayBox - PlayBox.imageOpen()

        <div class="playboximage containerName">
            ...
            ... <!-- If you like your other elements here -->            
            ...
        </div>
    
        <button class="buttonName">Click Me</button>
    
        <script type="text/javascript">
    
            PlayBox.imageOpen('.buttonName', '.containerName', ['image1.jpg','image2.jpg',...], 200, 300);
    
        </script>
    
    

    Note: 200, 300 are fadein and fadeout duration in milliseconds for box and it’s optional, the default duration is 300 milliseconds

    Fade In animation - PlayBox.fadeIn()

        <div class="cssSelector">Sample Element</div>
    
        <script type="text/javascript">
    
            PlayBox.fadeIn('.cssSelector', 300, function(){});
    
        </script>
    
    

    Note 1: 300 are fadein duration in milliseconds for the element and it’s optional, the default delay is 100 milliseconds

    Note 2: The third argument is a callback function after the fadein animation is complete the callback function executed, and it’s an optional argument

    Fade out animation - PlayBox.fadeOut()

        <div class="cssSelector">Sample Element</div>
    
        <script type="text/javascript">
    
            PlayBox.fadeOut('.cssSelector', 300, function(){});
    
        </script>
    
    

    Note 1: 300 are fadeout duration in milliseconds for the element and it’s optional, the default delay is 100 milliseconds, after the animation is completed the element display property set to display:none

    Note 2: The third argument is a callback function after the fadeout animation is complete the callback function executed, and it’s an optional argument

    Nesting PlayBox Functions

    We can also nest the callback function on each other

        PlayBox.fadeOut('.cssSelector', 1000, function(){
            PlayBox.fadeIn('.cssSelector', 1000, function(){
                alert("Animation Completed")
            });    
        });
    
    

    DOM Selector PlayBox.getElement()

    This Selector will return an HTMLElement of the selected DOM element,

        PlayBox.getElement('cssSelector');
    
    

    Note 1: This function will return the first occurrence of the element in the DOM

    DOM Selector PlayBox.getElements()

    This Selector will return an array of Elements, of the selected DOM element, You can perform all Array operations on those elements,

        PlayBox.getElements('cssSelector');
    
    

    DOM Selector PlayBox.children()

    This Selector will return all the first level child element as NodeList,

        PlayBox.children('cssSelector');
    
    

    Note 1: If you like to do Array operations on those NodeList, pass the NodeList into PlayBox.getElements(NodeList) this will return a Array of Children

    DOM Operations PlayBox.append()

    This method inserts specified HTML content to the end of the selected elements,

        PlayBox.append('cssSelector', '<tag>Element</tag>');
    
    

    DOM Operations PlayBox.prepend()

    This method inserts specified HTML content to the beginning of the selected elements,

        PlayBox.prepend('cssSelector', '<tag>Element</tag>');
    
    

    DOM Operations PlayBox.hasClass()

    This method return true if the have the specifed class else it will return false,

        PlayBox.hasClass('cssSelector', 'className');
    
    

    DOM Operations PlayBox.is()

    This method return true if the selected element is a specifed tag name element, else it will return false.

        PlayBox.is('cssSelector', 'HTMLTagName');
    
    

    DOM Operations PlayBox.index()

    This method return index integer of the element relative to it’s parent Element .

        PlayBox.index('cssSelector');
    
    

    DOM Event Handling PlayBox.click()

    This method add the click event handler to the selected element and execute the callback function if the element was clicked.

        PlayBox.click('cssSelector', function(){
            alert('Element Clicked');
        });
    
    

Download Details:

Author: deepakplay

Source Code: https://github.com/deepakplay/playbox-js

#javascript

What is GEEK

Buddha Community

Easy Any Content Lightbox & Gallery

How To Create User-Generated Content? [A Simple Guide To Grow Your Brand]

This is image title

In this digital world, online businesses aspire to catch the attention of users in a modern and smarter way. To achieve it, they need to traverse through new approaches. Here comes to spotlight is the user-generated content or UGC.

What is user-generated content?
“ It is the content by users for users.”

Generally, the UGC is the unbiased content created and published by the brand users, social media followers, fans, and influencers that highlight their experiences with the products or services. User-generated content has superseded other marketing trends and fallen into the advertising feeds of brands. Today, more than 86 percent of companies use user-generated content as part of their marketing strategy.

In this article, we have explained the ten best ideas to create wonderful user-generated content for your brand. Let’s start without any further ado.

  1. Content From Social Media Platforms
    In the year 2020, there are 3.81 million people actively using social media around the globe. That is the reason social media content matters. Whenever users look at the content on social media that is posted by an individual, then they may be influenced by their content. Perhaps, it can be used to gain more customers or followers on your social media platforms.

This is image title

Generally, social media platforms help the brand to generate content for your users. Any user content that promotes your brand on the social media platform is the user-generated content for your business. When users create and share content on social media, they get 28% higher engagement than a standard company post.

Furthermore, you can embed your social media feed on your website also. you can use the Social Stream Designer WordPress plugin that will integrate various social media feeds from different social media platforms like Facebook, Twitter, Instagram, and many more. With this plugin, you can create a responsive wall on your WordPress website or blog in a few minutes. In addition to this, the plugin also provides more than 40 customization options to make your social stream feeds more attractive.

  1. Consumer Survey
    The customer survey provides powerful insights you need to make a better decision for your business. Moreover, it is great user-generated content that is useful for identifying unhappy consumers and those who like your product or service.

In general, surveys can be used to figure out attitudes, reactions, to evaluate customer satisfaction, estimate their opinions about different problems. Another benefit of customer surveys is that collecting outcomes can be quick. Within a few minutes, you can design and load a customer feedback survey and send it to your customers for their response. From the customer survey data, you can find your strengths, weaknesses, and get the right way to improve them to gain more customers.

  1. Run Contests
    A contest is a wonderful way to increase awareness about a product or service. Contest not just helps you to enhance the volume of user-generated content submissions, but they also help increase their quality. However, when you create a contest, it is important to keep things as simple as possible.

Additionally, it is the best way to convert your brand leads to valuable customers. The key to running a successful contest is to make sure that the reward is fair enough to motivate your participation. If the product is relevant to your participant, then chances are they were looking for it in the first place, and giving it to them for free just made you move forward ahead of your competitors. They will most likely purchase more if your product or service satisfies them.

Furthermore, running contests also improve the customer-brand relationship and allows more people to participate in it. It will drive a real result for your online business. If your WordPress website has Google Analytics, then track contest page visits, referral traffic, other website traffic, and many more.

  1. Review And Testimonials
    Customer reviews are a popular user-generated content strategy. One research found that around 68% of customers must see at least four reviews before trusting a brand. And, approximately 40 percent of consumers will stop using a business after they read negative reviews.

The business reviews help your consumers to make a buying decision without any hurdle. While you may decide to remove all the negative reviews about your business, those are still valuable user-generated content that provides honest opinions from real users. Customer feedback can help you with what needs to be improved with your products or services. This thing is not only beneficial to the next customer but your business as a whole.

This is image title

Reviews are powerful as the platform they are built upon. That is the reason it is important to gather reviews from third-party review websites like Google review, Facebook review, and many more, or direct reviews on a website. It is the most vital form of feedback that can help brands grow globally and motivate audience interactions.

However, you can also invite your customers to share their unique or successful testimonials. It is a great way to display your products while inspiring others to purchase from your website.

  1. Video Content
    A great video is a video that is enjoyed by visitors. These different types of videos, such as 360-degree product videos, product demo videos, animated videos, and corporate videos. The Facebook study has demonstrated that users spend 3x more time watching live videos than normal videos. With the live video, you can get more user-created content.

Moreover, Instagram videos create around 3x more comments rather than Instagram photo posts. Instagram videos generally include short videos posted by real customers on Instagram with the tag of a particular brand. Brands can repost the stories as user-generated content to engage more audiences and create valid promotions on social media.

Similarly, imagine you are browsing a YouTube channel, and you look at a brand being supported by some authentic customers through a small video. So, it will catch your attention. With the videos, they can tell you about the branded products, especially the unboxing videos displaying all the inside products and how well it works for them. That type of video is enough to create a sense of desire in the consumers.

Continue Reading

#how to get more user generated content #importance of user generated content #user generated content #user generated content advantages #user generated content best practices #user generated content pros and cons

Wanda  Huel

Wanda Huel

1602387065

Will Content Continue to Rule?

In the movie Little Women, Jo March’s (Saoirse Ronan) inky fingers give her away as the writer rather than just the bearer of someone else’s manuscript; as she claims initially in the newspaper editor’s office, she’s nervously visiting. The editor decisively strikes through many pages before accepting a story and making an offer of payment. Thrilled to the core, Jo March runs through the streets for she had sold her first piece of content!

Content - readers love it and writers enjoy creating it. The types of content are many and good content has driven industries like printing, publishing, broadcast, film, search engines, AI etc.

History of Content

Scripts and artwork carved and painted onto rocks, metals and other media, have survived the ravages of time to tell us of our collective civilizational histories. Somewhere in our distant past, human intellect created ink, and inks, in turn, helped grow human intellect. It was used to write edicts, laws, religious texts, epics, medical formulations, sensual poetry, taboos, etc., on palm leaves, papyrus, cloth, skins, tablets, etc.

#content-creation #content-writing #gpt-3 #types-of-content #power-of-media #ink #creativity #ai

Alice Evans

Alice Evans

1624016340

Top 5 Event Marketing Platforms in the World

We have curated the list after thoughtful consideration of the user reviews and solutions provided by the Event Marketing Platforms. When you choose the right platform for event marketing, you should be able to scale your events. All the event as mentioned above marketing companies offer a wide variety of services when it comes to event planning and promotion.

#strategies for content marketing #content marketing strategy #what is content marketing #examples of content marketing strategies

NA SA

NA SA

1587890940

Lightbox Photo Grid and Slideshow component for Vue.JS

v-lightbox is a Vue component which allows to display first x (1-5) images of your gallery in a grid view as you seen on Facebook timeline. Click on the thumbnail will display all images in a fullscreen, navigatable modal popup just like the gallery lightbox.

How to use

npm i @morioh/v-lightbox
import '@morioh/v-lightbox/dist/lightbox.css';

import Vue from 'vue'
import Lightbox from '@morioh/v-lightbox'

// global register
Vue.use(Lightbox);

Use CDN

<link href="https://cdn.jsdelivr.net/npm/@morioh/v-lightbox/dist/lightbox.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/@morioh/v-lightbox/dist/lightbox.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/@morioh/v-lightbox/dist/lightbox.css" rel="stylesheet">

<script src="https://unpkg.com/@morioh/v-lightbox/dist/lightbox.min.js" type="text/javascript"></script>

Images

<script>

    export default {
        data() {
            return {

                images: [
                    "https://i.wifegeek.com/200426/f9459c52.jpg",
                    "https://i.wifegeek.com/200426/5ce1e1c7.jpg",
                    "https://i.wifegeek.com/200426/5fa51df3.jpg",
                    "https://i.wifegeek.com/200426/663181fe.jpg",
                    "https://i.wifegeek.com/200426/2d110780.jpg",
                    "https://i.wifegeek.com/200426/e73cd3fa.jpg",
                    "https://i.wifegeek.com/200426/15160d6e.jpg",
                    "https://i.wifegeek.com/200426/d0c881ae.jpg",
                    "https://i.wifegeek.com/200426/a154fc3d.jpg",
                    "https://i.wifegeek.com/200426/71d3aa60.jpg",
                    "https://i.wifegeek.com/200426/d17ce9a0.jpg",
                    "https://i.wifegeek.com/200426/7c4deca9.jpg",
                    "https://i.wifegeek.com/200426/64672676.jpg",
                    "https://i.wifegeek.com/200426/de6ab9c6.jpg",
                    "https://i.wifegeek.com/200426/d8bcb6a7.jpg",
                    "https://i.wifegeek.com/200426/4085d03b.jpg",
                    "https://i.wifegeek.com/200426/177ef44c.jpg",
                    "https://i.wifegeek.com/200426/d74d9040.jpg",
                    "https://i.wifegeek.com/200426/81e24a47.jpg",
                    "https://i.wifegeek.com/200426/43e2e8bb.jpg"

                ],
            }
        },

    }

</script>

Default config

 <lightbox :items="images"></lightbox>

Lightbox Photo Grid and Slideshow component for Vue.JS

Cells config

The default will automatically display from 1 to 5 images, but if you have more than 5 and want to display only 2, 3 or 4 you can configure the cells prop:

<lightbox cells="4" :items="images"></lightbox>

Lightbox Photo Grid and Slideshow component for Vue.JS

<div class="row mt-30">
  <div class="col-6">
    <lightbox css="h-200 h-lg-250" :items="images" :cells="3"></lightbox>
  </div>
  <div class="col-6">
    <lightbox css="h-200 h-lg-250" :items="images" :cells="3"></lightbox>
  </div>
</div>

Lightbox Photo Grid and Slideshow component for Vue.JS

<lightbox cells="2" :items="images"></lightbox>

Lightbox Photo Grid and Slideshow component for Vue.JS

Demo

Lightbox Demo

Source Code

https://github.com/Morioh-Lab/v-lightbox

#vue #vuejs #lightbox #slideshow #gallery

Easy Any Content Lightbox & Gallery

PlayBox JS

PlayBox is a JavaScript library created by Deepak Kumar, This library helps to displays HTML, image slider by filling the screen and dimming out the web page.

This PlayBox Library does not use any other external Library, It also contains some of the polyfill jQuery functions.

Visit : PlayBox JS Demo

Getting Started

Download the Latest version of PlayBox from the GitHub release page

Download from: PlayBox GitHub Release

How to use:

  1. Include the playbox.js into your document, this PlayBox library injects necessary stylesheet into the document header when the page loads. you can override those values in custom css by !important property.

    <script src='playbox.js'></script>
    
    
  2. Create a div tag in the body section mentioned below, and you can use any number of boxes as with unique different containerName and buttonName, below are the examples of playbox use cases

    Note: The cssSelector mentioned in below examples also support PlayBox.getElement() and Javascript document selected Object

    HTML PlayBox - PlayBox.open()

        <div class="playbox containerName">
            <div class="container">
                ...
                ...
                ...
            </div>
        </div>
    
        <button class="buttonName">Click Me</button>
    
        <script type="text/javascript">
    
            PlayBox.open('.buttonName', '.containerName', 200, 300);
    
        </script>
    
    

    Note: 200, 300 are fadein and fadeout duration in milliseconds for box and it’s optional, the default duration is 300 milliseconds

    Image Slider PlayBox - PlayBox.imageOpen()

        <div class="playboximage containerName">
            ...
            ... <!-- If you like your other elements here -->            
            ...
        </div>
    
        <button class="buttonName">Click Me</button>
    
        <script type="text/javascript">
    
            PlayBox.imageOpen('.buttonName', '.containerName', ['image1.jpg','image2.jpg',...], 200, 300);
    
        </script>
    
    

    Note: 200, 300 are fadein and fadeout duration in milliseconds for box and it’s optional, the default duration is 300 milliseconds

    Fade In animation - PlayBox.fadeIn()

        <div class="cssSelector">Sample Element</div>
    
        <script type="text/javascript">
    
            PlayBox.fadeIn('.cssSelector', 300, function(){});
    
        </script>
    
    

    Note 1: 300 are fadein duration in milliseconds for the element and it’s optional, the default delay is 100 milliseconds

    Note 2: The third argument is a callback function after the fadein animation is complete the callback function executed, and it’s an optional argument

    Fade out animation - PlayBox.fadeOut()

        <div class="cssSelector">Sample Element</div>
    
        <script type="text/javascript">
    
            PlayBox.fadeOut('.cssSelector', 300, function(){});
    
        </script>
    
    

    Note 1: 300 are fadeout duration in milliseconds for the element and it’s optional, the default delay is 100 milliseconds, after the animation is completed the element display property set to display:none

    Note 2: The third argument is a callback function after the fadeout animation is complete the callback function executed, and it’s an optional argument

    Nesting PlayBox Functions

    We can also nest the callback function on each other

        PlayBox.fadeOut('.cssSelector', 1000, function(){
            PlayBox.fadeIn('.cssSelector', 1000, function(){
                alert("Animation Completed")
            });    
        });
    
    

    DOM Selector PlayBox.getElement()

    This Selector will return an HTMLElement of the selected DOM element,

        PlayBox.getElement('cssSelector');
    
    

    Note 1: This function will return the first occurrence of the element in the DOM

    DOM Selector PlayBox.getElements()

    This Selector will return an array of Elements, of the selected DOM element, You can perform all Array operations on those elements,

        PlayBox.getElements('cssSelector');
    
    

    DOM Selector PlayBox.children()

    This Selector will return all the first level child element as NodeList,

        PlayBox.children('cssSelector');
    
    

    Note 1: If you like to do Array operations on those NodeList, pass the NodeList into PlayBox.getElements(NodeList) this will return a Array of Children

    DOM Operations PlayBox.append()

    This method inserts specified HTML content to the end of the selected elements,

        PlayBox.append('cssSelector', '<tag>Element</tag>');
    
    

    DOM Operations PlayBox.prepend()

    This method inserts specified HTML content to the beginning of the selected elements,

        PlayBox.prepend('cssSelector', '<tag>Element</tag>');
    
    

    DOM Operations PlayBox.hasClass()

    This method return true if the have the specifed class else it will return false,

        PlayBox.hasClass('cssSelector', 'className');
    
    

    DOM Operations PlayBox.is()

    This method return true if the selected element is a specifed tag name element, else it will return false.

        PlayBox.is('cssSelector', 'HTMLTagName');
    
    

    DOM Operations PlayBox.index()

    This method return index integer of the element relative to it’s parent Element .

        PlayBox.index('cssSelector');
    
    

    DOM Event Handling PlayBox.click()

    This method add the click event handler to the selected element and execute the callback function if the element was clicked.

        PlayBox.click('cssSelector', function(){
            alert('Element Clicked');
        });
    
    

Download Details:

Author: deepakplay

Source Code: https://github.com/deepakplay/playbox-js

#javascript