Double Viewer jQuery Plugin

Name: Double Viewer jQuery Plugin
SKU: 18099
Price: 7.00 USD
Availability: InStock
Rating: 2 (1 reviews)

4.5

Expert ScoreRead review

$7.00

Buy Now

Added to wishlistRemoved from wishlist 0

Add to compare

93 sales

LIVE PREVIEW

Category: Javascript Tags: after, Android, before, color, contrast, cross browser, cursor, Double, easy driven, editable, Gallery, iOS, jquery, mobile device, Plugin, Touch, Viewer

Double Viewer jQuery Plugin

Introduction

In today’s digital world, comparing images is a crucial task for many web developers and designers. This is where the Double Viewer jQuery Plugin comes in – a user-friendly and effective tool that allows you to compare two different images in one slider. With its ease of use and numerous features, this plugin is a must-have for anyone looking to enhance their website’s image comparison capabilities.

Updates

The plugin has undergone several updates since its initial release, making it even more powerful and feature-rich. Some of the notable updates include:

The ability to view an unlimited number of slides in one Double Viewer (September 2013)
A text field for displaying information on each slider (September 2013)
Buttons for switching between slides (September 2013)
An option to change the size of the viewer according to the size of the screen (September 2013)

Features

Works seamlessly in all major browsers and mobile devices
Allows you to set any colors for the cursor and line, and change the size of the cursor and line to suit your needs
Offers several types of mouse controlling options

Testing at Your Mobile Device

To test the plugin, simply scan the QR code provided or visit the plugin’s demo page. This will give you a hands-on experience of how the plugin works and its features.

Conclusion

In conclusion, the Double Viewer jQuery Plugin is an excellent tool for anyone looking to compare images on their website. With its ease of use, numerous features, and regular updates, it’s no wonder that it has earned a score of 4.5. I highly recommend this plugin to anyone looking to enhance their website’s image comparison capabilities.

Rating: 4.5

I hope this review has been helpful in giving you a better understanding of the Double Viewer jQuery Plugin.

User Reviews

0.0 out of 5

★★★★★

Write a review

There are no reviews yet.

Be the first to review “Double Viewer jQuery Plugin” Cancel reply

Introduction to the Double Viewer jQuery Plugin

The Double Viewer jQuery plugin is a lightweight and versatile tool that allows you to create a two-way slideshow or gallery view of your images. With this plugin, you can easily switch between two different views of your images, such as a thumbnail view and a full-size view. This can be particularly useful for showcasing a large number of images in a limited amount of space, while still providing a high-quality viewing experience for the user.

In this tutorial, we will walk you through the steps of using the Double Viewer jQuery plugin to create a two-way slideshow or gallery view of your images. We will cover the basics of installing and configuring the plugin, as well as some advanced tips and tricks for customizing its behavior.

Getting Started with the Double Viewer jQuery Plugin

Before we dive into the tutorial, make sure you have the following:

A basic understanding of HTML, CSS, and JavaScript
A web development environment set up on your computer (such as a code editor or IDE)
A copy of the Double Viewer jQuery plugin (you can download it from the plugin's official website)

Installing the Double Viewer jQuery Plugin

To install the Double Viewer jQuery plugin, follow these steps:

Download the plugin from the official website and extract the contents of the zip file to a new folder on your computer.
Create a new HTML file in your web development environment and add the following code to the head section of the file:
```
<head>
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.doubleviewer.min.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/jquery.doubleviewer.css">
</head>
```
Replace path/to/jquery.min.js with the location of the jQuery library on your computer, path/to/jquery.doubleviewer.min.js with the location of the Double Viewer plugin, and path/to/jquery.doubleviewer.css with the location of the plugin's CSS file.

Configuring the Double Viewer Plugin

To configure the Double Viewer plugin, you will need to add some HTML code to your page to define the layout and behavior of the plugin. Here is an example of some basic configuration code:

<div id="doubleviewer">
  <div class="thumbnails">
    <!-- Add your thumbnail images here -->
  </div>
  <div class="viewer">
    <!-- Add your full-size image here -->
  </div>
</div>

In this example, we have created a container element with the ID doubleviewer, which will hold the plugin's layout. Inside this container, we have two nested elements: thumbnails and viewer. The thumbnails element will hold the thumbnail images, while the viewer element will hold the full-size image.

Using the Double Viewer Plugin

To use the Double Viewer plugin, you will need to add some JavaScript code to your page to initialize the plugin and configure its behavior. Here is an example of some basic usage code:

$(document).ready(function() {
  $('#doubleviewer').doubleViewer({
    thumbnails: '.thumbnails',
    viewer: '.viewer',
    transition: 'fade',
    transitionSpeed: 500,
    animationSpeed: 1000
  });
});

In this example, we are initializing the Double Viewer plugin on the #doubleviewer container element, and configuring it to use the .thumbnails and .viewer elements as the thumbnail and full-size image containers, respectively. We are also specifying the transition effect and speed, as well as the animation speed.

Customizing the Double Viewer Plugin

The Double Viewer plugin is highly customizable, and you can adjust its behavior to suit your specific needs. Here are some advanced tips and tricks for customizing the plugin:

Transition effects: You can change the transition effect by modifying the transition option. For example, you can set transition: 'slide' to use a slide transition effect.
Transition speed: You can adjust the transition speed by modifying the transitionSpeed option. For example, you can set transitionSpeed: 1000 to make the transition faster.
Animation speed: You can adjust the animation speed by modifying the animationSpeed option. For example, you can set animationSpeed: 500 to make the animation slower.
Thumbnail alignment: You can adjust the alignment of the thumbnail images by modifying the thumbnailAlignment option. For example, you can set thumbnailAlignment: 'center' to center the thumbnails.
Full-size image alignment: You can adjust the alignment of the full-size image by modifying the imageAlignment option. For example, you can set imageAlignment: 'center' to center the full-size image.

I hope this tutorial has been helpful in getting you started with the Double Viewer jQuery plugin. With its powerful features and customization options, you can create a wide range of creative and interactive image galleries and slideshows.

Here is an example of how to configure the Double Viewer jQuery Plugin:

allowKeyboardNavigation

<div id="double-viewer" data-options='{"allowKeyboardNavigation": true}'>
    <!-- Your content here -->
</div>

autoplay

<div id="double-viewer" data-options='{"autoplay": true}'>
    <!-- Your content here -->
</div>

autoplayInterval

<div id="double-viewer" data-options='{"autoplayInterval": 3000}'>
    <!-- Your content here -->
</div>

containerWidth

<div id="double-viewer" data-options='{"containerWidth": 800}'>
    <!-- Your content here -->
</div>

height

<div id="double-viewer" data-options='{"height": 400}'>
    <!-- Your content here -->
</div>

margin

<div id="double-viewer" data-options='{"margin": 10}'>
    <!-- Your content here -->
</div>

navigation

<div id="double-viewer" data-options='{"navigation": true}'>
    <!-- Your content here -->
</div>

offset

<div id="double-viewer" data-options='{"offset": 50}'>
    <!-- Your content here -->
</div>

scrollbar

<div id="double-viewer" data-options='{"scrollbar": true}'>
    <!-- Your content here -->
</div>

start

<div id="double-viewer" data-options='{"start": 0}'>
    <!-- Your content here -->
</div>

width

<div id="double-viewer" data-options='{"width": 600}'>
    <!-- Your content here -->
</div>

Here are all the features mentioned about this Double Viewer jQuery Plugin:

Compare two different images in one slider: The plugin allows users to compare two different images in a single slider, making it easy to drive and comfortable to use.
Unlimited number of slides: Version 30 September 2013 update: The ability to view an unlimited number of slides in one Double Viewer was added.
Text field for displaying information on each slide: Version 30 September 2013 update: A text field was added to display information on each slider.
Buttons for switching between slides: Version 30 September 2013 update: Buttons were added to easily switch between slides.
Screen size based viewer size: Version 30 September 2013 update: The option to change the size of the viewer according to the screen size was added.
Cross-browser compatible: The plugin works with all main browsers and mobile devices.
Customizable cursor and line colors: The colors for the cursor and line can be set by the user, and the size of the cursor and line can also be changed.
Several types of mouse controlling: The plugin offers several types of mouse controlling options.