HelpFilePhotoSlideGK2 by Odane P. Hamilton

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

INSTRUCTION MANUAL

PHOTOSLIDE GK2 Copyright © 2008 GavickPro - http://www.gavick.com Copyright © 2008 GavickPro - http://www.gavick.com This manual cannot permissionfrom fromGavickPro GavickPro This manual cannotbe beredistributed redistributed without without permission More http://www.gavick.com More info info at: http://www.gavick.com

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

COPYRIGHT DISCLAIMER GavickPro PHOTOSLIDE GK2 - Joomla!1.5 Component Instruction Manual Copyright © 2008 GavickPro - http://www.gavick.com This manual cannot be redistributed without permission from GavickPro More info at: http://www.gavick.com Author: Paulo Seichinha - GavickPro FOR INFO, UPDATES, REQUESTS & CONTACT Check out Gavick.com, the official website of this Joomla! Component manual and home to high quality and professional templates, components and modules. Keep updated about all templates, components and modules by visiting our update.gavick.com Copyright © 2008 GavickPro - http://www.gavick.com

Table of Contents

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Introduction PhotoSlide GK2

Features of Gavick PhotoSlide GK2 . . . . . . . . . . . . . . . . . . . . . . 4 2

Getting Started

Downloading PhotoSlide GK2 package file . . . . . . . . . . . . . . . . . . 5 Files Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3

PhotoSlide GK2 Installation

Component Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Check System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 4

Plugin Installation

News Image 1 plugin installation and configuration . . . . . . . . . . . . . 8 - 9 5

Extension Installation

Rainbow Extension instalation . . . . . . . . . . . . . . . . . . . . . . . . 10 6

PhotoSlide GK2 Configuration

Adding Groups in the PhotoSlide GK2 . . . . . . . . . . . . . . . . . . . 11 - 12 Add Slides to Groups. . . . . . . . . . . . . . . . . . . . . . . . . . . 13- 14 7

Modules Installation and Configuration

News Image 1 module installation . . . . . . . . . . . . . . . . . . . . . . 15 News Image 1 module configuration . . . . . . . . . . . . . . . . . 16 - 17 - 18 News Image 1 Examples and tips

Some display examples of News Image 1 module . . . . . . . . . . . . . . . 19 News Image 1 module tips . . . . . . . . . . . . . . . . . . . . . . . . . 20

PHOTOSLIDE GK2

Introducing PhotoSlide GK2 Introduc

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

“Welcome to the second level of this amazing joomla component. More powerfull, mature and versatile, the Gavick Photoslide GK2 reach higher standards values that will amaze even more.” GavickPro Joomla professional development studio release for all Joomla Comunity the new PhotoSlide GK2. PhotoSlide GK2 component is the result of the constant study persecution and development from the GavickPro Team, to reach the most powerfull product of his nature. It’s the sequence from one of the most popular component in Joomla Comunity - PhotoSlide GK1. The Gavick PhotoSlide is the most advanced free joomla component that will help you to present in an eye-catching way your articles, products, stories or events in your website, using dazzling slideshow images integrated with your features content. Provided with some free and commercial exclusive membership modules, with fantastic high quality designs, the Gavick PhotoSlide GK2 will captivate full attention of your website visitors. Again, this new version of PhotoSlide component release a huge amount of possibilities, making use of a friendly administration panel, provides the solution to include easily future free modules styles, without changing the struture of your website. Also give us the way to create specific modules to work along with 3th party component like for example - VirtueMart eCommerce System - like we previously present in our eShoptrix II May 2008 Template. An overview of PhotoSlide GK2 key features:

PHOTOSLIDE GK2

• • • • • • •

• • • • • •

Joomla! 1.5 Native Javascript Framework Mootools Option for compressed engine script use NEW New technique of assets JavaScripts files NEW Content display of all Articles from any section or category Image Slide display with interactive content articles One high style quality design module 100% css based provided Future release of free and commercial style modules with easy integration Interactive communication with 3th party components in specific commercial modules. NEW Extensions support interface with component administration Multilanguage support for component, plugins, extensions and modules. NEW Customize User formatting Lightweight, modern and fast-loading design.

• • • • • • • • • • •

Image quality control system for loading optimization NEW Easy and friendly administration Support GIF, JPG and PNG normal format image (in some modules PNG format with transparent background). SEF URLs Different styles transitions effects Different slide navigation tools available Control panel - users can control the display of amount of news image Level Access for slide display control NEW AJAX support tools W3C XHTML 1.0 Transitional. W3C CSS Valid. Fully compatible IE7, Firefox 2+, Flock 0.7+, Netscape, Safari, Opera 9.5

Getting Started S

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

PhotoSlide GK2 - Overview files The first step to start working with our free Joomla !1.5 Component tool is downloading the Photoslide GK2 package, available for free in our download section. All the files that are included are necessary for the correct funcionality of this great tool. For this release, we choose the News Image I module for this new beginning, but in the future we will also launch other recoded and new modules. The installation is quite simple and it should not be a problem, if you follow correctly this instrutions.

Important! Be sure to unpack the file, before start working on it.

So, let’s get started by showing you a brief overview of the files available inside the PhotoSlide GK2 package. In fact, I will make reference to the files, following the sequence installation order.

com_gk2_photoslide.zip This file is the Component itself and it’s the heart of the system.

plg_gk_news_image_1.zip “Plugin” - This file contains the respective plugins, that will allow comunication and interface between the Component and the Module. For those who already experience the PhotoSlide GK2 version, you may remember that for the plugin installation, it was necessary to upload the 2 files in XML and PHP extension. In this new version, that is not necessary, because you only need to upload one compressed file, making the process must more easier for the user.

ext_rainbow.zip “Extension” - Here’s one of the new features that PhotoSlide GK2 provides. The use of especific extension tools that will help

in the configuration and administration of the Component. For this release, we provide the Rainbox extension, that we will talk later about.

mod_gk_news_image_1.zip “Module” - Finally, the module that will make possible for the frontpage display of your backstage work on the PhotoSlide

Component. This is the first module that we work on the beginning of the PhotoSlide component version, so it was almost like an obligation to us by choosing this great module for the PhotoSlide GK2 version release. After this small description of the files, let’s get to work and results.

PHOTOSLIDE GK2

PhotoSlide GK2 Installation PhotoSli

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Component Installation Using the Joomla! 1.5 Administrator, navigate to the administrative panel on your site. From the top menu, select Extensions > Install/Uninstall. Click the ‘browse’ button, select the component file (com_gk2_photoslide.zip) and press ‘Upload File & Install.’ A message will appear saying ‘Component - Success.’ This page will display an overview of the template, then select ‘Continue...’

PHOTOSLIDE GK2

Like said before in Key Features, one of the new caracteristic of the PhotoSlide GK2 is the possibility to work with diferent language besides english. The component comes along with translation files like German, Italian, Polish and in the future, others will be included. So, after the installation process is done, you should see some messages indicating that it was not posible to create some language files. Don’t worry, because this notices are quite normal. If you don’t have in your Joomla Web site those languages, naturally the setup of the component will not be able to install those files.

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Important ! The next step after an sucessful installation process, it is strongly suggested that you should first check the system of the component in your web site. Navigate to the main page of the component by going to Components > Gavick PhotoSlide GK2 (if you followed the installation instructions above this option should be in the list of components). There’s an option on the main menu - “Check System” - that will show you if all conditions are set correctly on your joomla installation, marking on the right panel with green color the right conditions on folders permissions and if the needed tables were created in your database.

When checking the system, if some field’s are with red text colour on the permissions column, you should test the uploading images, because in some cases it may shows initially the warning information, but after doing some tests, it will work perfectly.

Also, in check system, page it will display more informations about GD Library (open source code library for the dynamic creation of images). Another nice improvement added on the “Check System” panel is the possibility to verify automatically if there’s a new version or upgrade to the component. This information is easily provided by pressing the “Check for updates” button that will comunicate directly to our server update.gavick.com.

PHOTOSLIDE GK2

Plugin In Installation

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

News Image 1 plu plugin - Installation and Configuration (for News Image 1 module)

Important! Before installing any module, it’s absolutely necessary to have installed the respective plugin in the component. It will allow communication interface between the module and component. Recommendation! If you disable an plugin installed (not UNISTALL) them this plugin is invisible on the list of types of groups when select add group option. If you delete an plugin installed, them all groups, slides and images will be deleted also. So, we strongly recomend to disable the plugins instead of deleting them, if you have unused plugins.

Unlike the previous version of PhotoSlide Component that was necessary to upload/install two files separately in XML and PHP format, in this new version that will not be necessary, because the plugin is provided in one single compressed file and only this one will be upload and install, without any unpack action. After this brief introduction, let start the installation. Returning to the PhotoSlide GK2 administration panel, select the “Plugins” tab link. You should see the plugins administration panel with the message “Any plugins to load” because there’s none, naturally.

PHOTOSLIDE GK2

Them select “Install Plugin” option on the right menu, seach the respective plugin file on your computer and upload/install.

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

If you follow the installation instructions above, you be able to see the plugin available on the panel, but notice that is status indicates that it’s not enable. To enable it, select the plugin by clicking on the checkbox and them press “Enable Plugin” on the right menu.

The status bottom icon with inlight, indicating that the plugin is enable and available on the PhotoSlide GK2.

PHOTOSLIDE GK2

Since this moment, we are able to start creating slide groups in the PhotoSlide GK2, but it would not be value to us, if we don’t have the tool to display in frontpage our backstage work. So, we need to install the module, in this case, specifically the News Image 1 module. Before we move to the step, let’s first show you how to install an optional new feature of the PhotoSlide Component.

Extension Installation Extensio

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Extension installation for PhotoSlide GK2 This is a new and nice improvement that we included on this version of PhotoSlide. Now, beyond the plugins integration, you can extend more the PhotoSlide by using specific extensions that will create new and rich interface elements. For now, we only provide one - the Rainbow extension- a nice colorpicker tool that will help users to easily pick up the wanted hex colour code and pasted on the parameters definitions groups fields. In the future, we will release others free or exclusive Gavick Membership extensions that will increase more and more the potencial of this component. Returning to the PhotoSlide GK2 administration panel, select the “Extensions” link on the menu. Again, you should see the extensions administration panel with the message “Any extensions to load”. Let’s install the rainbow extension and the process could not by more easier, because it’s exactly the same steps as we did previously on the plugins. Select “Install extension” option on the right menu

Seach in your computer the ext_rainbow.zip file, select it, upload and install.

PHOTOSLIDE GK2

At this moment, you will be able to see the extension available on the panel. Once again, it’s necessary to enable it if we want to use it. Select the extension by clicking on the checkbox and them press “Enable extension” on the right menu. In the next chapter, you will see it in action.

PhotoSlide PhotoSl i GK2

administration

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Adding Groups in the PhotoSlide GK2 Now, you are ready to add groups to your PhotoSlide GK3 component. To start adding groups navigate to “Components > Gavick PhotoSlide GK2” and press on the right menu the “Add Group” button.

Since we install previously only one plugin, so it’s automatically taken for this group. In case you have more available, you will see a drop menu were it’s necessary to select the plugin that will interface with the group.

In this page, we need to fill all the parameters fields to set the main configuration of the group. Group name: For identification of the group, that will be necessary on the module configuration.

a big number of slides to be display, naturally we want to avoid most posible, long time loading page. So, we can use this option to increase speed loading of the module, by decreasing the image quality percentage to maximum, without cross over the fair quality needed, of course. Image Width: The width value in pixels of the image. Image Height: The height value in pixels of the image.

PHOTOSLIDE GK2

Image Quality (0...100%): This is a new feature that will give another important control for the user. If there’s a group with

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Thumbnail Width:

The width value in pixels of the thumbnail (in this case, available for the News Image I module). Thumbnail Height:

The height value in pixels of the thumbnail (in this case, available for the News Image I module). Background color: Title color: Text color: Link color: Hover Link color:

Color value in hex format for each fields. Remember the Rainbow extension ? Here you can put it in action by simply clicking inside each requested color fields and easily select your desired color. The hex code will be immediatly available. See the following screenshot as example.

After setting all requested fields, save the group. You be able to edit this values later, if you want.

PHOTOSLIDE GK2

Now that the group is created and configurated, here’s a new feature that we include on the PhotoSlide GK2 administration. By clicking on the link “Settings” in the right column, you have an AJAX preview of the settings in the group, like the screenshot indicates.

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Add slides to groups in PhotoSlide GK2 It’s all set with the group, so let’s start creating slides on it. Press the link group and inside you will see the group slides content. Naturally, at this time it doesn’t show anything. Press the “add slide” option on the right menu.

Set the following parameters provided by the News Image I plugin.

Name: The name that you want to give to your slide (just for your orientation). Image: Search and choose your image on your computer to upload. Access Level: This new feature gives us the possibility to set a level access to the slide. Title: The title of the slide to be show on the module display (if you choose bellow you own title and text display). Text: The text of the slide to be show on the module display (if you choose bellow your own title and text display). Link type: Set if you want your own link or the link of an existent article. Article: If you choose an article link, set it here or leave the “Your own title and text” set. Wordcount: Set the number of words to be display on the slide from the article or from your text. Image Stretch: If you have an image smaller or bigger from the module display option, choose “Stretch image” and this will automatically reset the image dimensions to fill totally the module. This option may withdraw some quality image if the same have some dimension not proportional from the module. If you have a image with same dimension set on the module, set it “Don’t stretch image” option. After you add all your slides content on the group, you can rearrange the order of the slides as desire.

PHOTOSLIDE GK2

Link Value: If you choose previously your own link type, set it here or leave it blank if you didn’t (ex. http://mylink.com).

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Exactly as seen previously, also in the slide page we can click the AJAX â&#x20AC;&#x153;settingsâ&#x20AC;? option and see all the information about that especific slide.

On the AJAX settings box, we included a preview of both main slide image and thumbnail (in this case, thumbnails available for News Image I) that will be display on the the module.

PHOTOSLIDE GK2

After all slides are done, this will be an example of the slide page group display. In our case, we introduced 6 slides in the News Image I demo group.

Module

Installation and Configuration

GA VICKPRO VIC C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

News Image I module installation !

Take note that even if we are installing the News Image I module, the process instalation of others modules have the same steps. From the top menu, select Extensions > Install/Uninstall. Click the ‘browse’ button, select the News Image I package file (mod_gk_news_image_1.zip) and press ‘Upload File & Install.’ A message will appear saying ‘Install Module Success.’ them select “Continue...”

Notice that, once again, you will see some warning messages, saying that some language files were not installed. Remember that this is perfectly normal, because if you don’t have those language on your Joomla!1.5 web site, the setup file will not be able to create this files.

It’s time to configurate the module and put it working on the frontpage. So, navigate to >Extensions > Module Manager, find the Gk News Image I module and enter. Now, we will show you how to configurate the module, by using the News Image I version. Others modules will have some diferent parameters fields, but the main idea of configuration it’s the same.

PHOTOSLIDE GK2

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

News Image I module configuration Set the module in your choice position and enable it. But before you save it, you must configurate the following parameters fields.

Module parameters: Module Class Suffix: A suffix to be applied to the css class of the module (table. moduletable), this allows individual module styling Module Unique ID: Unique ID for module (must be unique if you have two or more modules running on one page)

Slides Group: For those who already experienced the previous PhotoSlide GK1, you may remember that we used an integer value to identify the group. Now, itâ&#x20AC;&#x2122;s different, because all the name groups available will be show on a drop menu. Just select the one that you will use. Module Width and Module Height: If you want to set different width than value set on the Photoslide Administration Group. If not, just leave it and mantain 0 value.

PHOTOSLIDE GK2

Slide position (left and right):

This is another new feature. It gives you the possibility to move the slide image position inside the module area. With this option, you can customize some different styles display, playing with the background color and, for example, with the Ticks position. Show Text Block: Enable this option if you want show article content linked with slides.

GA VICKPRO C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Text Block width:

Buttons margin right:

Set here the text block width to be displayed on the module.

Set margin beetween interface buttons and module right side.

Text block margin: g

Buttons margin bottom:

With this option, you be able to move the position of the text block from left to right.

Set margin beetween interface buttons and module bottom side.

Text Block Opacity:

Slides as Links:

The opacity of the background of the text block (values from 0.00 to 1.00).

Switch ON click events for slides (images as links). Thumbnail bar:

Text block background: You can select default background from group settings or your own value.

Switch ON/OFF the thumbnails bar (available in this case, for the News Image I module. You may find this option on others or not.

Text block background g color:

Thumbnail images margin:

If you choose â&#x20AC;&#x153;Your own valueâ&#x20AC;? in previous option, set here in hex code the color desired.

Set margin between thumbnails images in thumbnail bar. Thumbnail images border-width:

Clean XHTML:

Set border width for thumbnail image.

You can clean your articles from any formatting. Read more button: Condition: if you want to show readmore button.

Thumbnail images border color (inactive or active): Set in this two fields, in hex format, the border colors for better signal navigation.