Color version →Carbonizer

Color version →Illuminati

Color version →Lucido

Color version →Lucida

Backgrounds

The new themes have backgrounds based on a combined effect of a repeating background image, and an overlaying transparent radial gradient. For each theme, you can choose from a range of different background patterns.

View dark theme backgrounds (carbonizer + lucido)

View light theme backgrounds (illumniati + lucida)

To change your theme background, you will need to edit your theme, and then go to style.background_image.url, and choose a background from the drop-down menu.

Radial Gradient

To create a nice stage effect, there is by default a transparent radial gradient that overlays the pattern background image. If you want to remove the radial gradient and only display the pattern background, you can go to edit theme → style.background_image2.enabled, and disable it. If you for some reason want to edit the radial gradient, you can create your own, or download the radial.fla and edit it in Adobe Flash. You will need to export as a swf file, and upload into your theme folder.

Color Stylesheet

The default theme stylesheets are relatively subtle, so if you want a stronger color contrast, you can activate the color.css stylesheet. Edit your theme, go to style.stylesheet, and select the color.css in the drop-down menu. Furthermore, you can edit the theme stylesheets by navigating to your theme from the admin, and choosing Edit Stylesheet.

Carbonizer Color›Illuminati Color›

Screenshots

Video examples›

* Videos normally open in a lightbox window, while on mobile they normally open in the native player.

MP4 Video Format

First of all, what video format should you be using? A few years ago this would be a tough question, however today the answer is simple. mp4 is the current web standard for video because of widespread support and features. With the mp4 format, your videos will display in the flash gallery, as well as on most mobile devices from the mobile gallery.

H.264 Codec
Using the mp4 “format” does not necessarily mean using the same “codec”, so what codec should you be using? For your mp4 video, be sure to use the H.264 codec, which is the current industry-standard and supported on most devices.

* iPad/iPhone has native mp4 video support.

Why not FLV?

The flv format used to be the industry-standard video format for the web some time ago, but with the arrival of new mobile devices, things changed. FLV is basically SWF flash video, and as you may know, many mobile devices do not support flash.

* You can still use the flv format, but videos will not display on most mobile devices.

Will the video work on all mobile devices?

If you are using the mp4 format, your videos will display on most mobile devices. There are still a few older smartphones unfortunately that will not support mp4 video.

Dimensions

So what dimensions should you be using for your video? In this day and age with fast internet connections, you can easily choose 720p HD (High-definition). HD videos are nice to watch, and most visitors are able to view 720p video without much delay. Optionally, you might consider 480p SD (Standard-definition) if you want to make sure the videos stream without delay for most visitors. Keep in mind that videos will take a lot of server space and bandwidth, so if your server is slow, or you are somehow limited, you need to take this into consideration.

* 720p normally consists of a 1280 x 720 resolution
* 480p normally consists of a 640 x 480 resolution

Youtube and Vimeo video

Can you display Youtube and Vimeo videos in Imagevue? Yes you can, but obviously you will not be uploading Youtube videos to Imagevue. Instead, you need to add a lightbox link to either the main menu, or to a text page or title/description. For example, from our video demo gallery, you can try to click the “Youtube” and “Vimeo” links in the description.

Go to the lightbox feature page to learn how to open a lightbox link. Scroll down to “Open a video” to find out how to open a Youtube or Vimeo video.

Video on startpage

You may want to use a Youtube- or Vimeo video directly on your startpage? No problemo. First create a new page/folder, set it as “link”, and then add the lightbox code to the link field as in the example below. Thereafter, go to settings → settings.startpath, and set your new link folder as the start page. The video will now open and display on your startpage! Example →

javascript:lightbox('http://player.vimeo.com/video/22564317?title=0&byline=0&portrait=0&color=ffffff', {iframe:true, innerWidth:'750', innerHeight: '422'})

Gallery examples›Example›

* Try clicking the photo, map, video and website links.

How to use it?

To use the lightbox feature, you need a small snippet of Javascript as your link:

javascript:lightbox('URL');

From the main menu

To add a lightbox link to your gallery menu, first go to your admin management page. Create a new folder, and set it to be a link. In the link field, simply add the javascript code:

javascript:lightbox('URL');

Open on start page

Perhaps you want to open a lightbox window immediately when your gallery opens? This can be used for example to display a Youtube video, or some custom content. From the admin, navigate to your start-folder, set it as link, and in the link field simply add the javascript code:

javascript:lightbox('URL');

From an anchor link

If you want to create a link for an image title/description or in a text page, you need to wrap the javascript code in an anchor tag naturally:

<a href="javascript:lightbox('URL');">link text</a>

* If you are editing the link from the text page editor, you can enter the javascript string directly.

To add a lightbox link to your gallery menu, go to your admin management page. Create a new folder, and set it to be a link. In the link field, simply add the javascript code:

javascript:lightbox('URL');

Open an image

Opening an image file is the easiest thing to do, and the lightbox will automatically resize to fit the image dimensions.

javascript:lightbox('path/image.jpg');

Example›

Open a html page

When opening external pages or websites, you will normally need to use the iframe setting because the lightbox can’t load the website directly into the box, but instead uses an iframe.

javascript:lightbox('http://imagevuex.com', {iframe:true})

*By default, the lightbox window opens at 95% width and height when using iframe

Example›

There are some cases when you might not need to use iframe, if you for example are loading html or PHP pages that dont contain the <header>. This may for example be a guestbook script or some simple html content. However, you will need to set width and height if you are opening content with undefined size without using iframe.

javascript:lightbox('something.html', {width:500, height:100%})

Open a Google Map

To open a Google map into the lightbox, first go to Google Maps and search out your location you want to display. Click the link icon, and copy the map link. Finally, append “&output=embed” to the end of the link.

javascript:lightbox('https://maps.google.com/maps?q=New+York,+NY,+USA&hl=en&sll=37.0625,-95.677068&sspn=41.767874,79.189453&oq=new+york&t=w&hnear=New+York&z=11&output=embed', {iframe:true})

Example›

Open a video

To Open a Youtube video, first go to Youtube and locate the video. Click the share button, and thereafter the embed button, and copy the link in the src.

javascript:lightbox('http://www.youtube.com/embed/ZHLNS5m-aD4?rel=0&hd=1', {iframe:true})

* When adding Youtube video, you can append &hd=1 to the URL to load a HD version of the video if available

Example›

If you want to set the dimensions identical to the video, we recommend using innerHeight and innerFrame to match the video size or aspect

javascript:lightbox('http://www.youtube.com/embed/ZHLNS5m-aD4?rel=0&hd=1', {iframe:true, innerWidth:'640', innerHeight: '360'})

* Adding videos from Vimeo is almost an identical process

The Function

By now, you have probably already noticed that there are several optional parameters available. The URL is always required, while optional parameters are set in an {object}.:

javascript:lightbox('URL', {object});

Below are the most important parameters:

javascript:lightbox('URL', {title:'text', iframe: true, width:500, height:'90%'});

The Imagevue lightbox is based on Colorbox, an open source lightbox plugin for jQuery. You can find more advanced parameters on the colorbox page.

Notes

• Functions.js
  The lightbox function requires several scripts to run properly, including the Imagevue functions.js, jQuery and colorbox.js. The lightbox feature will not automatically run if you are running Imagevue SWF embedded in a custom document, unless you include the javascripts also.
• Mobile
  On the mobile version of Imagevue, the lightbox function is bypassed and links simply open in blank windows/tabs.
• Native Support
  Since Imagevue X2.8, the lightbox script is also used natively in Imagevue to open popups, video and maps (from images with location data).

To preview the mobile gallery, simply access the demo from a mobile device:

Mobile Light Theme›Mobile Dark Theme›

* You can check the links above from desktop also, since they are forcing a redirect to the mobile version. However, please reset demo gallery afterwards. You can also preview your own Imagevue mobile gallery from a desktop computer by appending ?mobile=1 behind the URL.

How to set up the Mobile gallery

By default, your mobile gallery “just works”. This means that anyone accessing your gallery from a mobile device, will automatically be viewing your gallery from the mobile interface. However, you may wish to make a few changes to your mobile gallery. Go to Admin › Settings › Mobile

Changing the mobile header graphics

* Global header at top and startpage header below

By default, the mobile gallery includes a default global header and startpage header. They are basically two images that combine nicely on the startpage, while on other pages only the global header displays. You can use a similar concept, or you can just leave the startpage header empty and use only the global header. You can also use plain html in any of these fields if you need custom content.

• Create the image(s)
  Since the graphics adapt to display on a multitude of devices with various dimensions, we recommend using relatively large graphics that also look good on large devices like iPad. We recommend 1024 x 200 px, although if you are ambitious and want to cover iPad3 retina pixel-doubling, you may even consider 2048 x 400 px.
• Upload
  We recommend uploading the graphics with FTP to your gallery iv-config/ folder. This way, your custom graphics will stay intact even after upgrades
• Edit Settings
  After uploading the graphics, you will need to change your mobile settings. Go to admin › settings › mobile, and change the settings appropriately. For example:
  Global header

  <img src="iv-config/global-mobile-header.jpg"/>

  Startpage header

  <img src="iv-config/startpage-mobile-header.jpg"/>

  * If you are only using the global header, you can leave the startpage header field blank.

Adding social media icons in the footer

* Social media links in the footer

If you have one or more social feeds, you can optionally add them as icons in the footer instead of having them in the menu. To add social icons to the mobile footer, you will need to add some html code. Go to admin › settings › Mobile › Footer Toolbar ›

<a href="https://www.facebook.com/imagevue" target="_blank">
	<img src="iv-includes/images/icons/facebook-128.png" alt="Facebook" width="64" height="64" />
</a>
<a href="https://twitter.com/imagevue" target="_blank">
	<img src="iv-includes/images/icons/twitter-128.png" alt="Twitter" width="64" height="64" />
</a>
<a href="?/contact/">
	<img src="iv-includes/images/icons/email-128.png" alt="E-mail" width="64" height="64" />
</a>

Then, go to settings › Custom CSS › Mobile Gallery CSS › and add:

.footer img {margin:0 5px;}

In the code above, we have included Facebook, Twitter, and E-mail, but you can add several others. Remember to change the href attribute to point to your own urls, and remember to set target=”_blank” for external links (not for internal links like the e-mail link). The mobile social media icons are available from version X2.8.2, and support retina screens.

* If the icon/service you want to use is not available above, you will simply need to upload your own icon.

Other Considerations

Compatibility & Mobile Selector

Some features available from the standard gallery, may not be available for the mobile gallery or may not display as you desire. For example filemods do not work on mobile, and the mobile does not support FLV video. To remedy this, you have the option to disable certain gallery folders from displaying in the mobile version. Navigate to a specific folder in your admin, and you will find a platform selector at the bottom left. Un-check the mobile version and click save if you want to hide the specific folder from displaying in your mobile gallery.

Folder View Mode

By default, Imagevue Mobile displays a page with image thumbnails when you enter a gallery folder. You have the option to change the folder view mode to instead display full size images in a vertical layout. Go to settings → Mobile → Folder View Mode.

Screenshot Thumbnails›Screenshot Images›

Toolbar Title

By default, the mobile toolbar displays the title of the current folder. You can change the toolbar title under mobile settings, but then it will remain static throughout the mobile gallery.

Thumbnail Columns

By default, the mobile gallery displays 3 columns of thumbnails. However, on large-screen devices like iPad, this amount is doubled simply because it looks much better. You can change the amount of thumbnail columns from the mobile settings, but keep in mind it will always be doubled on large-screen devices.

Mobile Video / MP4

Imagevue Mobile supports display of video on mobile platforms, but normally only with the mp4 format. We therefore recommend using the mp4 video format, which works from both flash and mobile, instead of the FLV format which is limited to flash-only. Keep in mind, not all mobile platforms can deal with video at all, and this is simply out of our hands.

Using Video in Imagevue›

Photo swiping

The mobile gallery uses a nice swipe interface when viewing images, so that it is simple to navigate between images on a touchscreen. This is a complicated javascript interface, which in its current iteration prevents certain expected functionality like double-tap context menu.

Footer and Authorization

Unless you have authorized your Imagevue gallery, you will not be able to edit the footer in mobile settings. This we have implemented on purpose as a limitation.

Screenshots

The following screenshots are taken from Imagevue Mobile gallery on iPhone and iPad:

http://phillip.com.pl/powerpack/

PowerPack is free to use, but as far as it’s for free, source files are not available. Of course you can get them in non-free version.

Features:

1. Comments system;
2. Vote system;
3. News system;
4. Darken background in content view;
5. Footer;
6. Quick language switch button;
7. Full customization from your imagevue admin panel;
8. 2 different languages support for all modules;
9. Lightweigth:
   - Main module have only 58 KB , other modules are loaded “on the fly”;
   - Comments module: 36 KB;
   - News module: 33 KB;
   - Voting module: 0 KB (included in main module).

Compatibility:

1. Minimum Imagevue X2.7.5 (check release notes for your PowerPack version – press release info button in right-down corner of your installator).

Requirements:

1. Most of modules require SWFAddress option enabled (Admin panel -> Settings -> Useswfaddress);
2. Vote system require MySQL database.
3. Notifications about new comments and votes requires Email address specified in main of your imagevue admin panel settings section

How to install:

• Download PowerPack;
• Upload folder “extras” by ftp right to root of your imagevue gallery folder
• Go to browser and open url: “…/extras/powerPack/powerpack_install.swf” (replace “…” by path to your extras folder)
• Follow instructions on the screen (NOTE: you have to be logged in your imagevue admin panel, otherwise you will not be able to access your PowerPack installator)

Support forum thread here

View Demo›

In the following examples, the same gallery folder is displayed in multiple languages:
English›Italiano›Español›Française›Deutsch›Pусский›中文›

Interface Language

By default, Imagevue already provides dozens of languages ready to use for the gallery interface. You can set your default language by going to your Admin › settings › settings.language. Although this sets the language for your gallery interface, it will not affect your titles or descriptions until you effectively create them in multiple languages. You can edit languages by going to Admin › Languages

Item Language

You can set multiple languages for titles, descriptions, text-pages and menu-links by using language tags. Language tags are generally used by including your choice of languages inside language [tags]. In the example below, we have created a title for English and Spanish:

[english]This is a title[/english][spanish]Este es un título[/spanish]

The resulting output for English (?language=english) would be:

Whereas the resulting output for Spanish (?language=spanish) would be:

You can also include text outside of the tags, which will display for any language. For example:

1. [english]This is a title[/english][spanish]Este es un título[/spanish] link

The resulting output for English (?language=english) would be:

Whereas the resulting output for Spanish (?language=spanish) would be:

The benefits of adding items outside of the language tags, are for example links, menu-icons or images (in text-pages) which are global to all your languages.

Although you are using multiple languages, you only need to set [language] tags for items where you strictly need separate languages. For items that don’t have language tags, Imagevue will simply display the plain item text. Additionally, if a language is being viewed that a language tag is not created for, Imagevue will use the text from the first language tag.

How to Implement Languages for your Visitors

Now that you know how to set up your gallery to support multiple languages, you may wish to know how you can provide the language options for your visitors. There are several alternative implementations, depending slightly on your requirements. Most galleries don’t even need multiple languages, but there are some cases where you may want to present your portfolio for example in English, and then also in your native language ›

1. Links

The easiest way to provide your audience with a specific language, is simply by appending the ?language parameter in the URL of your gallery. For example if you want to provide a link to your Spanish version, the link would be:

In our demo gallery:
/demo/x2/?language=spanish

* Keep in mind, you do not need to set the ?language parameter for your default language

2. Startpage Links

A simply way to provide a language option for your visitors, is to set up links on your start-page. In your start-page, simply add links in your title or description which link to your required languages. For example:

<a href="?language=english">English</a> | <a href="?language=spanish">Español</a>

3. Menu Links

Perhaps the best option for your visitors to switch between languages, is to provide language links in your Imagevue main menu. You can for example create a menu item that displays a link to the Spanish version from the English version, and a link to the English version from the Spanish version.

• 1. Go to your Imagevue Admin › Manage, and click [+ New] on the top to create a new folder item
• 2. Set the new folder to Use as:[Link] in the dropdown selector.
• 3. In the title field, add your titles in the languages you require. For example

  [english]Spanish version[/english][spanish]English version[/spanish]

• 4. The Description field is optional, but in the Link field, add your links for the languages:

  [english]?language=spanish[/english][spanish]?language=english[/spanish]

Now you have a gallery that displays a link to the “other” language than the one that is currently being viewed! Keep in mind, if you require additional languages, you may need to create separate menu links. Additionally, you may want to add country flag menu-icons for this link in your menu. You can download country flags png icons here or here.

4. Splash Page

If it is very important for your visitors to be able to select their language before the gallery loads, then you can create a basic splash page. The splash page will appear before the gallery, and provide language selection options for your visitors.

View Example›Download Source›

• To create your own splash page or edit the html example from above, you need to have some experience with Html (or someone must be able to help you).
• Simply upload the file index.html into your gallery folder, and it will display before index.php which contains your actual gallery.
• You can download additional Flag icon images here.
• You will need to edit the file appropriately and include links to your languages as specified earlier. Feel free to edit the document as you like – You may like to add some text, logo, more languages and links.

5. Advanced Domain forwarding

If you have multiple domains or the same domain in two (or more) country codes, then you can use this to trigger different languages for each domain. For example, you may have a *.com domain for English and another *.[country] domain for your native language.

Simply open the file in your gallery root called htaccess.txt:

# RewriteEngine on

# RewriteCond %{SERVER_NAME} site\.de$ [NC]
# RewriteCond %{REQUEST_URI} ^/$ [NC]
# RewriteRule .* ?language=german [QSA]

# RewriteCond %{SERVER_NAME} site\.com$ [NC]
# RewriteCond %{REQUEST_URI} ^/$ [NC]
# RewriteRule .* ?language=english [QSA]

In the example above, the gallery will set ?language=german if the domain ends with *.de (German), and ?language=english if the domain ends with *.com. After you have edited the file to suit your domains and language, rename it to “.htaccess” and upload it to the root of your gallery

Notes

• If you require visual differences for each language, you can also use separate themes for each of your languages. In the examples below, we have set separate themes for each language through the URL:
  {yourgallery}/?language=spanish&theme=spanish
  {yourgallery}/?language=english&theme=english

  Naturally, you will need to create themes for your languages first.

• You could also use a more elaborate setup by creating separate language files spanish.html, english.html and so on for the languages you require. The benefit would be that the language parameter and theme parameter can be embedded directly into the code, so they don’t “pollute” your URL. This is generally done by duplicating the html for your gallery into multiple language files, and simply changing a few parameters in each document.
• Important! Imagevue languages use browser cookies – This means that once your visitor clicks a specific language for viewing, their browser will stick to this language even when the ?language parameter is not set. The language will only reset- or change if they actually click a link where the ?language parameter is set.

Social Media Icons from AddThis

The first option, is to select an icon from the wide variety of social media icons available from the AddThis sharing service.

• 1. Go to the AddThis Services List page, and locate the Code for the service from which you want to display the icon. Optionally, you can go here to view all the available icons – Simply hover mouse over any of the icons to find the Code.
• 2. Go to your Imagevue Admin and navigate to the folder where you want to add the icon
• 3. Edit your folder title to include the [Code] in brackets:

  [servicecode]Title Here

  For example:

  [twitter]Follow on Twitter

  Although the icons represent various social media services, you can utilize the icons for any type of folder as you like: gallery, textpage, filemod or link.

Custom Icons

You can also use your own custom icons loaded from the following Imagevue folder:

You can either use any of the existing icons in this folder, or you can upload your own icon(s) in gif or png format. To display an icon from this folder in your main menu:

• 1. Simply find the filename of the icon you wish to use from the iv-includes/images/icons/ folder
• 2. Go to your Imagevue Admin and navigate to the folder where you want to add the icon
• 3. Edit your folder title to include the icon [filename] in brackets:

  [filename]Your Title

  For example:

  [imagevue.png]Imagevue Website

  * Keep in mind you only need to add the name of the file, and not the entire path.

Notes

• We recommend using 16px icons in the main menu, although you can also use 32px size depending on your menu style. Anything larger than this, and your menu may break.
• Icons that have “_32″ in the end of their filename, are 32px in size (width and height)
• For those of you who were already using menu icons in Imagevue X2.6, you may need to upgrade your titles. Instead of using the folder name (for example “facebook”) to load a folder icon, instead you must use the [shortcode] implementation in titles explained above. The benefit is that you can use any folder icons without having to depend on the folder name.
• If you set your folder name to “share”, the menu item will function as a global share link for your gallery. Read more here
• The menu graphic icons also display in the HTML version of Imagevue

Imagevue Fotomoto Demo›Fotomoto Tour›www.fotomoto.com›

How Fotomoto works in Imagevue

One of the best things about the Fotomoto module, is how easy and seamlessly it integrates with Imagevue. All you need to do is click to sign up from your Imagevue Admin, and you are ready to go! There is no need to upload images, as they are automatically added to your Fotomoto Dashboard when they are viewed in your Imagevue gallery. You can thereafter proceed to set product- and pricing options from your Fotomoto Dashboard. After someone orders a print or e-download from your Imagevue gallery, Fotomoto will require a high-resolution version of the file suitable for print or download – Either you will receive an e-mail with instructions on how to upload the file, or you can use the Auto Pickup feature so that Fotomoto can automatically access the high resolution version. You will be able to see all your sales from the Order Page in your Fotomoto Dashboard, and payments are made to you by either cheque or PayPal.

Related Fotomoto Links:
How Fotomoto works on your website
How to set product- and pricing options for your images
How to prepare a print-ready high-res file after a customer makes an order
How to get paid for the products sold using Fotomoto

How to get started

Fotomoto is FREE to use, so you can try it out and disable it afterwards if you don’t want to use it. To get started, follow these steps:

1. Sign up and enable Fotomoto

First step is to sign up for a Fotomoto account and activate Fotomoto in Imagevue. Simply go to your Imagevue admin, and click the “Fotomoto” button in the main menu. Fill in your name + e-mail, and simply click “Create Fotomoto Account”. Your Fotomoto account will be created automatically, and you will also receive a confirmation e-mail from Fotomoto with your account details. Fotomoto will automatically be activated in your Imagevue gallery, and your Fotomoto Site Key will be stored in your settings.

You can now view your gallery and see that Fotomoto is activated, although you may also wish to go through the following steps:

2. Enable buy buttons

• After activating Fotomoto in Imagevue, buy-buttons will automatically be added to your imagebuttons, maincontrols and to your right-click context-menu. If you are missing the buttons in any of these locations, or if you for some reason want them removed from any of these locations, you can go to Imagevue settings and add or remove them manually.
• You can also add Fotomoto purchase options as text-links above the images:
  settings › image.text.text3.enabled

  You may of course also change any other settings for the text3 element through theme- or settings. You may wish to change the layout so they instead appear below the image, or maybe you want to change the font style in the theme CSS.

3. Visit your Fotomoto Dashboard

• Login to your admin Fotomoto Dashboard here: http://my.fotomoto.com/
• After images have been added to your Fotomoto Dashboard, you can set product- and pricing options, and create collections
• If you are using the audioplayer in Imagevue, you may need to re-position the checkout cart into the bottom right corner of the screen. In your Fotomoto Dashboard, go to Settings › Store Appearance, and then under “Shopping Cart Appearance”, choose “Position: Bottom Right” and click “Save Appearance”.
• You can change the captions/titles of the buttons from your Fotomoto Dashboard under Settings › Store Appearance – Hover mouse over any of the buttons in the preview and click “Change Label”.

FAQ

• How do I disable Fotomoto for specific folders?
  There are two ways to disable Fotomoto for specific folders in your Imagevue gallery:
  • 1. From your Imagevue Admin, navigate to any of the folders where you want to disable Fotomoto, and add the following code to the folder-parameters:

    fotomoto.enabled=false

    This will prevent the images in this folder from being added to your Fotomoto Dashboard, and also disable Fotomoto buttons for this folder.

  • 2. The second option, is to go to your Fotomoto Dashboard and set the “Not for sale” collection as default collection. All new photos will be added to this collection, and Imagevue will not display purchase buttons for any images that are not for sale. You can also “move” all your existing images from any other collection to the “not for sale collection”. Your only task would then be to actually manage what images to add/keep in your “For Sale” collection(s). More about Fotomoto Collections ›

Notes

• All Fotomoto product-options displayed in your Imagevue gallery are loaded- and synchronized with the available products set for each image from your Dashboard
• If a photo is set “not for sale” from your Fotomoto Dashboard, the fotomoto-related purchase buttons will be removed from the Imagevue interface. The same also happens if Fotomoto is disabled for a specific folder.
• Fotomoto only works with Imagevue X2.7 or newer
• Fotomoto also works with the Html-version of Imagevue – View Demo
• You can change a few Fotomoto display settings in then Imagevue settings:
  settings › fotomoto

Support

• For more information about Fotomoto, visit the Fotomoto Support pages:
  http://support.fotomoto.com/
• You can ask questions, report problems or share ideas in the Fotomoto Forums:
  http://getsatisfaction.com/fotomoto/
• Fotomoto FAQ (Frequently Asked Questions)
  How Fotomoto works on you website
  How to set product- and pricing options for your images
  Using “Collections” to price groups of images differently
  Print product descriptions
  Selling Downloads- and Licenses
  How to use “Auto-Pickup” to automatically find your high-res files
  How to use Fotomoto with watermarked images
  How to get paid for the products sold using Fotomoto
  How to prepare a print-ready high-res file after a customer makes an order
  Using Fotomoto FAQ
  Fotomoto Troubleshooting FAQ
  Customer Service FAQ (for buyers)

The Share Button

In Imagevue, there is now a new share button available. When you mouse over the share button, a handful of social media services appear, ready to share the specific page you are visiting. When you click any of the specific services, you will be linked onwards to confirm the share.

In the screenshot above, we are about to share a gallery folder on Facebook. After sharing the link, visitors clicking the link in Facebook will be forwarded directly to the specific gallery page/image that was shared.

At the bottom of the share button options, there is a button “more”. Upon clicking the “more” button, an overlay-window opens with basically all sharing options known to mankind:

Share Button Options

You can disable, or choose which sharing services to display in the share-menu, by going to admin › settings › misc.sharing.services. Simply find the code for the service you wish to use from the AddThis Services List, and add the code to the array. For example:

email|E-mail,facebook,twitter,more

• In the example above, the email setting triggers the native Imagevue e-mail module
• You can set your own custom title by using the | character. In the example above, we are using the email code, but we wanted to set our own title , so we set: email|E-mail
• Other sharing items are set from the AddThis Services List
• By using the “more” code, you can are adding a button that opens an extended sharing menu with all services

The share button is by default available from folder page, text pages and of course from images. You also have the option to add the share button globally to the main controls.

• Thumbnails/folder Pages – Admin › Settings › thumbnails.thumbnails.sharebutton
• Text Pages – Admin › Settings › textpage.sharebutton
• Image/File Pages – Admin › Settings › image.imagebuttons.buttons
• Main Controls – Admin › Settings › controls.maincontrols.items

The share menu inherits the style of your theme. You can specifically edit the text formatting by editing your theme CSS stylesheet:

.sharemenu {}

Global Share Button in Main Menu

You can also add a global sharing button in your main menu for visitors to simply share your gallery home page!

To add a share button in your main menu, simply create a new folder item called “share”. This will automatically become a share button in your main menu. You can of course change the title of the menu item to anything you want.

Connect to your own Social Media Channels

Many of you have your own social media pages in Facebook, Twitter, Flickr, Picasa, Myspace etc., and you may want to make these pages available to your visitors. You can of course add links to your accounts from text pages or in descriptions, but you can also use a special feature for the Imagevue main menu:

To add links with icons for social media pages in your main menu, simply create a new folder in your gallery and set it to use as [link]. In the title for your folder, add the service name in brackets followed by your own title. For example:

[flickr]My Flickr

You can read more about about this here:
Using Menu Icons›

Adding the “Social Thing” sharing widget

Many of you want to add the additional social widgets like we have done in our demo gallery (or see the standalone example widget here)

Unfortunately, this is not as easy as it may seem, and we do not support this directly from Imagevue settings. Why? Because these widgets are in fact iframe features that display interactive web content directly from facebook, twitter and Google. We can not load this into the Imagevue SWF gallery, and neither can we control the visual style of the item. Instead, these widgets need to be embedded manually into your html template in a floating layer above the SWF. Please follow these steps:

• 1. Go to your admin -> settings -> Custom CSS -> Flash Gallery CSS. Paste the CSS:

  /* CSS Social Thing */
  #social-thing {position: absolute; right: 120px; top: 10px; display: none;}
  .rounded {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
  .rounded-up {-webkit-border-top-left-radius: 3px;-moz-border-radius-topleft: 3px;border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topright: 3px;border-top-right-radius: 3px;}
  .background { background: url(halfblack.png);}
  .item {float:left;}
  .item img {border: none;}
  .item img.smallicon {margin:5px; vertical-align:bottom;}
  .item img.largeicon {position: absolute; left: 15px; top:15px;}
  .item .service {position: absolute; right: -105px; top: 26px;  height: 62px; display: none;}
  .item .service * { white-space:nowrap !important; }
  #facebook-layer.item .service {display: block; top: -100px;}
  #facebook-layer.item.setpos .service {top:26px;}
  #facebook-layer .service .container {margin: 19px 0 0 62px; }
  #twitter-layer .service .container {margin: 21px 0 0 62px; width: 360px;}
  #google-layer .service .container {margin: 20px 0 0 20px; width: 200px;}
  #imagevue-layer .service .container {margin: 21px 25px 0 62px;}
  #imagevue-layer .service .container a {color: #FFFFFF; text-decoration: none; font:15px Optima,Candara,arial,sans-serif;}

  Click save

• 2. Then go to admin -> settings -> seo.counters. Paste the code:

  <div id="social-thing" class="rounded background">
        <div id="facebook-layer" class="item rounded-up">
           <img class="smallicon" src="http://cache.addthiscdn.com/icons/v1/thumbs/facebook.gif"/>
           <div class="service rounded background">
              <a href="http://www.facebook.com/imagevue" target="_blank" title="Imagevue on Facebook"><img class="largeicon" src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png"/></a>
              <div class="container" id="myfacebook">
                 <div id="fb-root"></div>
              </div>
           </div>
        </div>
        <div id="twitter-layer" class="item rounded-up">
           <img class="smallicon" src="http://cache.addthiscdn.com/icons/v1/thumbs/twitter.gif" />
           <div class="service rounded background">
              <a href="http://twitter.com/imagevue" target="_blank" title="Imagevue on Twitter"><img class="largeicon" src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/twitter.png"/></a>
              <div class="container">
                 <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
                 &nbsp;
                 <a href="http://twitter.com/imagevue" class="twitter-follow-button" data-button="grey" data-text-color="#FFFFFF" data-link-color="#00AEFF">Follow @imagevue</a>
              </div>
           </div>
        </div>
        <div id="google-layer" class="item rounded-up">
           <img class="smallicon" src="http://cache.addthiscdn.com/icons/v1/thumbs/google.gif" />
           <div class="service rounded background">
              <div class="container">
                 <g:plusone href="http://imagevuex.com/demo/x2/"></g:plusone>
              </div>
           </div>
        </div>
        <div id="imagevue-layer" class="item rounded-up">
           <img class="smallicon" src="iv-includes/images/icons/imagevue.png" />
           <div class="service rounded background">
              <a href="http://imagevuex.com" target="_blank"><img class="largeicon" src="iv-includes/images/icons/imagevue_32.png"/></a>
              <div class="container">
                 <a href="http://imagevuex.com" target="_blank"><small>© 2011 - </small>Imagevuex<small>.com</small></a>
              </div>
           </div>
        </div>
     </div>
  
     <script type="text/javascript">
     // <![CDATA[
        $(window).load(function () {
           function setButton(selector) {
              $(selector).addClass("loaded");
              $(selector).mouseenter(function () {
                 $("#social-thing").removeClass("background");
                 $(selector).addClass("background setpos");
                 $(".service", selector).fadeIn(150);
              });
              $(selector).mouseleave(function () {
                 $("#social-thing").addClass("background");
                 $(selector).removeClass("background");
                 $(".service", selector).fadeOut(200);
              });
              var buttonCount = $('#social-thing').children().size() - $('#social-thing').children('.loaded').size();
              if (buttonCount == 0) {
                 $("#social-thing").fadeIn(300);
              }
           }
           var fbLike = '<fb:like href="http://imagevuex.com/demo/x2/" send="false" show_faces="false" colorscheme="dark" font=""></fb:like>';
           $(fbLike).appendTo('#myfacebook');
  
           $.getScript('http://connect.facebook.net/en_US/all.js', function () {
              setButton("#facebook-layer");
              FB.init({appId: '220574884633155', status: true, cookie: true, xfbml: true});
           });
           $.getScript('http://platform.twitter.com/widgets.js', function () {
              setButton("#twitter-layer");
           });
  
           if (-1 != navigator.appVersion.indexOf('MSIE 7') || -1 != navigator.userAgent.indexOf('iPad')) {
              $("#google-layer").addClass("loaded");
              $('#google-layer').hide();
           } else {
              $.getScript('https://apis.google.com/js/plusone.js', function () {
                 setButton("#google-layer");
              });
           }
  
           setButton("#imagevue-layer");
        });
     // ]]>
     </script>

  Click save

• 3. Download the semi-transparent black background here: halfblack.png, and upload it in your folder /iv-config/css/halfblack.png

Important! The code above is for Imagevue Twitter and Facebook, so you will need to edit the code appropriately to connect to your own services. There are 4 items in total in the example widget: Facebook, Twitter, Google+1 and Imagevue – You can remove any of the items to your liking by amending the code. You can get some hints here for the code for each specific widget: Google +1 button, Facebook like button, Twitter Tweet button, Twitter Follow button.

Adjustments
Since the “social-thing” widget is in its own html layer, we do not have any possibility to control it from the Imagevue SWF Gallery. Therefore, you may need to adjust the element’s position based on your own theme, layout and preferences. In the CSS code above, find the following line:

#social-thing {position: absolute; right: 120px; top: 10px; display: none;}

Basically, you can change the numbers above to offset the position of your element from the top right corner of the screen. Additionally, if you want to change the position/alignment altogether, you could use left and bottom instead of richt/top. For example:

left: 100px; bottom: 100px;

Important!
# Some browsers may not be able to display this floating layer 100% correctly.
# We do not officially support this feature because of the technical nature of the integration

]]> http://imagevuex.com/documentation/social-media-sharing/feed/ 76 http://imagevuex.com/documentation/edit-themes/ http://imagevuex.com/documentation/edit-themes/#comments Tue, 07 Dec 2010 08:21:11 +0000 mjau-mjau http://imagevuex.com/?p=7545 In Imagevue, you can create your own theme to change the visual style of your gallery.

Create your Theme

To get started editing a theme, you first need to create your own theme. Choose a theme you want to use from the list, and click Create New. Give your new theme a name, and you will see that it appears in the list.

Why can’t I just edit an existing theme?
Since Imagevue X2.5, we locked the native Imagevue themes so you cannot edit them. Instead, you need to make a copy of the theme you want to change, and then you can instead edit your copy. We made it like this, so that your theme customizations do not get overwritten when upgrading Imagevue.

Edit your Theme

Once you have created your own theme, you will see an Edit button for this theme – Click this button to edit your theme. The Edit-Theme page is separated into two sections:

Edit Settings
This page allows you to edit settings for the theme. These settings are generally related to the visual style of the theme.

Edit Stylesheet
This page allows you to edit the CSS stylesheet for your theme. The CSS stylesheet is used to edit all text-formatting (font-styles) throughout your theme. Read more:

Formatting text with CSS Stylesheets›

Theme Examples

To better understand the what themes can do for you, please take a look at some of the Imagevue themes:

carbonizer›carbonizer color›illuminati›lucido›lucida›Black›firestarter›gardener›bluedragon›abyss›white›persimmon›zanzibar›

]]> http://imagevuex.com/documentation/edit-themes/feed/ 0