Simple Portofolio Viewer – Javascript XML Gallery

3.75

Expert ScoreRead review

$7.00

Buy Now

Added to wishlistRemoved from wishlist 0

Add to compare

56 sales

Category: Javascript Tags: Gallery, javascript, javascript xml gallery, js xml portofolio, Portofolio, portofolio viewer, portofolio xml gallery, simple, simple portofolio viewer, Viewer, xml, xml portofolio viewer

Simple Portofolio Viewer – Javascript XML Gallery

Introduction

In today’s digital age, having a visually appealing and user-friendly portfolio is crucial for any individual or business looking to showcase their work. With the rise of online platforms, creating a portfolio that stands out from the crowd can be a daunting task. This is where Simple Portofolio Viewer – Javascript XML Gallery comes in, a powerful and versatile tool that allows you to create a stunning portfolio in no time. In this review, we’ll dive into the features and functionality of this impressive gallery and see if it’s worth considering for your next project.

Features

The Simple Portofolio Viewer – Javascript XML Gallery is packed with a wide range of features that make it an ideal choice for anyone looking to create a professional-looking portfolio.

Universal compatibility: This gallery can be used on any website, making it a versatile option for a wide range of applications.
Smart navigation and image pre-loading: The gallery is designed to provide a seamless user experience, with smart navigation and image pre-loading to ensure that your images load quickly and efficiently.
Keyboard navigation: Users can navigate through the gallery using the right and left arrow keys, making it easy to browse through your images.
Resizable images and expand image using lightbox: Images can be resized to fit your needs, and the lightbox feature allows users to view images in a larger format.
Custom link for each image: You can add custom links to each image, making it easy to direct users to specific pages or websites.
Custom caption with Title, Description & link: Captions can be customized with title, description, and link, providing users with more information about each image.
Cool blur effect on captions: The gallery features a cool blur effect on captions, adding a touch of elegance to your portfolio.
XML Configuration: The gallery is configured using XML, making it easy to manage and customize your portfolio.
JavaScript features: The gallery offers a range of JavaScript features, including xmlUrl, arrowsHide, autoplay, autoplaySpeed, thumbs, and phpProcessor, providing advanced customization options.

Conclusion

Overall, the Simple Portofolio Viewer – Javascript XML Gallery is an impressive tool that offers a wide range of features and customization options. With its universal compatibility, smart navigation, and resizable images, this gallery is an ideal choice for anyone looking to create a professional-looking portfolio. While it may take some time to get used to the XML configuration, the end result is well worth the effort. We would highly recommend this gallery to anyone looking to showcase their work online.

Rating

We give the Simple Portofolio Viewer – Javascript XML Gallery a rating of 3.75 out of 5 stars. While it’s an impressive tool, there may be some users who find the XML configuration a bit overwhelming. However, for those who are willing to put in the time to learn and customize the gallery, the end result is well worth the effort.

Screenshot

[Image: http://alexandraipate.com/support.png]

I hope this review helps! Let me know if you have any questions or need further clarification.

User Reviews

0.0 out of 5

★★★★★

Write a review

There are no reviews yet.

Be the first to review “Simple Portofolio Viewer – Javascript XML Gallery” Cancel reply

Introduction

The Simple Portfolio Viewer - JavaScript XML Gallery is a lightweight and easy-to-use JavaScript library that allows you to create a responsive and interactive portfolio gallery from an XML file. With this tutorial, you'll learn how to use the library to create a beautiful and functional portfolio gallery on your website.

Getting Started

To get started, you'll need to download the Simple Portfolio Viewer - JavaScript XML Gallery from the official website. Extract the downloaded zip file to a new folder on your computer.

Step 1: Create an XML File

The first step is to create an XML file that will contain the data for your portfolio gallery. The XML file should be named portfolio.xml and should be located in the same folder as the extracted library files.

Here's an example of what the portfolio.xml file might look like:

<?xml version="1.0" encoding="UTF-8"?>
<portfolio>
    <project>
        <id>1</id>
        <title>Project 1</title>
        <description>This is a description of project 1.</description>
        <image>image1.jpg</image>
        <link>http://example.com/project1</link>
    </project>
    <project>
        <id>2</id>
        <title>Project 2</title>
        <description>This is a description of project 2.</description>
        <image>image2.jpg</image>
        <link>http://example.com/project2</link>
    </project>
    <!-- Add more projects here -->
</portfolio>

Step 2: Add the JavaScript Files

The next step is to add the JavaScript files to your HTML file. You'll need to add the following files:

simplePortfolioViewer.js (the main JavaScript file)
simplePortfolioViewer.css (the CSS file for styling the gallery)

You can add these files to your HTML file by creating a <script> tag for the JavaScript file and a <link> tag for the CSS file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="simplePortfolioViewer.css">
</head>
<body>
    <script src="simplePortfolioViewer.js"></script>
    <!-- Add your HTML content here -->
</body>
</html>

Step 3: Create the HTML Structure

The next step is to create the HTML structure for your portfolio gallery. You'll need to add a div element with the ID portfolio-gallery to your HTML file. This is where the gallery will be rendered:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="simplePortfolioViewer.css">
</head>
<body>
    <div id="portfolio-gallery"></div>
    <script src="simplePortfolioViewer.js"></script>
</body>
</html>

Step 4: Initialize the Portfolio Viewer

The final step is to initialize the portfolio viewer by calling the init() method and passing the XML file as an argument:

<script>
    var portfolioViewer = new SimplePortfolioViewer();
    portfolioViewer.init('portfolio.xml', 'portfolio-gallery');
</script>

This will render the portfolio gallery in the div element with the ID portfolio-gallery. You can customize the appearance and behavior of the gallery by using the various options and methods provided by the library.

Customizing the Gallery

The Simple Portfolio Viewer - JavaScript XML Gallery provides a range of options and methods that allow you to customize the appearance and behavior of the gallery. Here are a few examples:

Changing the thumbnail size: You can change the size of the thumbnails by using the thumbnailWidth and thumbnailHeight options:
```
portfolioViewer.options.thumbnailWidth = 100;
portfolioViewer.options.thumbnailHeight = 100;
```
Changing the lightbox settings: You can customize the lightbox settings by using the lightbox option:
```
portfolioViewer.options.lightbox = {
width: 800,
height: 600,
overlay: true
};
```
Adding custom controls: You can add custom controls to the gallery by using the controls option:
```
portfolioViewer.options.controls = {
previous: '<a href="#" class="prev">Previous</a>',
next: '<a href="#" class="next">Next</a>'
};
```
These are just a few examples of the many options and methods available in the Simple Portfolio Viewer - JavaScript XML Gallery. By using these options and methods, you can create a custom portfolio gallery that meets your specific needs.

Conclusion

That's it! With this tutorial, you should now have a complete portfolio gallery up and running on your website. By following the steps outlined in this tutorial, you can create a beautiful and functional portfolio gallery that showcases your work. Remember to experiment with the various options and methods provided by the library to create a custom portfolio gallery that meets your specific needs.

Here is a complete settings example for Simple Portofolio Viewer - Javascript XML Gallery:

General Settings

<general>
  <title>My Portfolio</title>
  <description>My Portfolio Viewer</description>
  <background-color>#FFFFFF</background-color>
  <font-color>#000000</font-color>
  <border-color>#CCCCCC</border-color>
  <border-width>1</border-width>
  <border-style>solid</border-style>
</general>

Gallery Settings

<gallery>
  <items>10</items>
  <thumbs>true</thumbs>
  <max-width>800</max-width>
  <max-height>600</max-height>
  <transition-duration>0.5</transition-duration>
  <transition-effect>slide</transition-effect>
</gallery>

XML Settings

<xml>
  <file>portfolio.xml</file>
  <path>/path/to/xml/files/</path>
</xml>

Image Settings

<image>
  <resize>true</resize>
  <resize-width>800</resize-width>
  <resize-height>600</resize-height>
  <border-radius>10</border-radius>
  <shadow-effect>true</shadow-effect>
  <shadow-color>#666666</shadow-color>
  <shadow-offset>2</shadow-offset>
</image>

Navigation Settings

<navigation>
  <prev-button>true</prev-button>
  <next-button>true</next-button>
  <prev-button-text>&lt;&lt;</prev-button-text>
  <next-button-text>&gt;&gt;</next-button-text>
  <prev-button-position>left</prev-button-position>
  <next-button-position>right</next-button-position>
</navigation>

Animation Settings

<animation>
  <start-effect>slide</start-effect>
  <end-effect>slide</end-effect>
  <start-duration>0.5</start-duration>
  <end-duration>0.5</end-duration>
</animation>

Here are the features of the Simple Portofolio Viewer - Javascript XML Gallery extracted and listed individually:

Universal: You can use it on any website!
Smart navigation and image pre-loading:
Keyboard navigation using Right/Left buttons:
Resizable images and expand image using lightbox:
Custom link for each image:
Custom caption with Title, Description & link:
Cool blur effect on captions:
XML Configuration – Title, Description, Link, Image:
JavaScript features:
- xmlUrl
- arrowsHide: true
- autoplay: true
- autoplaySpeed: 5000
- thumbs:
  - show: true
  - width: 220
  - height: 100
  - blockHeight: '450px'
  - phpProcessor