Discover how idsign stacks
makes web designing easier

Just visit our stacks page on this site.You’ll get a brief description of what each stack can do. Click on „Stacks Manuals” - choose a stack and you’ll see a detailed manual (examples included). If a problem occurs while designing your website, please first visit our support page for the answer.

iDSIGN Image Gallery stack: makes webdeveloping easier

Stacks Image 5442

This stack is a little bit more complicated and aquires more knowledge of image editing. Don't buy the stack if you don't have the skills. The extra features are also more for advanced webdevelopers. On this page you'll see some screenshots from the "Image Gallery" stack, if you hover it and click on a features you'll get an brief explanation. The stack is devided in 3 parts: Basic settings, Xtra settings and a build-in lightbox.

ATTENTION: if you import a add-on image (something like number 11 from the build-in add-ons) it could overlap the image beneath. So, in order to edit the images or to replace them you have to select "add-on image: none" -> after you make your changes you can reset the add-on image select box to your prefered setting.
WARNING: If you choose homemade image inside the Hover select box (Xtra Settings), you'll get 2 image placeholders. Inside the first one you can drop transparent png files, the second one (for IE) doesn't support png animations (shows a black border in IE) so you have to make a seperate image specialy for IE (jpg file - not transparent)

Hover this screenshots and click on the items you would like more information about
Original ID:
You can use multiple image galleries on your page with a different look: just change the original ID.

ATTENTION!
Each image gallery you drop on your page has to have a different ID even if you want to use the same style !
Images
Choose the amount of images you want to show in your image gallery (max images:50 )
Columns
This feature is IMPORTANT if you want to disable the margin from the last image in each row. So you can take advantage of the full with from the content area. So if you have a gallery with 12 images and 3 rows, you have to add 4 inside the Columns inputfield (=4 images (columns) inside each row)
Width / Height and Radius
Defines the width height and radius (round corners) from your images. Round corners doesn't apply on the image itself but on the div's around the image.
Position the images
With the following features (margin padding and position) you can position the images untill you have the desired look
Style
Clean - Basic - Expanded - Simplified
Each style will enable or disable features necessary for the selected style. Depending the style of background used, xtra features will show. Play with the select boxes and see what changes. Be creative: with this features you can make almost whaterver you want
Use Background
Color - Image - Transparent
Each feature can enable and disable other features. If you sellect image, the colors will disappear and the Image placeholder appears. Depending the style you choose, the border functions will also appear or disappear.
Stacks Image 123
These features will style the inner image block depending the style you have chosen.
Use Background
These settings are the same as above, but can appear or disappear depending the style you have choosen). These settings will only take place on the second outer div and can be used if you select following styles: Expanded and simplified
Add-on Image
None - Built-in - Homemade
Depending the feature you sellect other feature settings will appear. If you choose for ex. Bluit-in you'll get a select box with 15 predefined built-in images. You can position or scale this image. (Attention small images will not scale)
Stacks Image 25
Homemade setting
Same settings as built-in but with an image placeholder to select your homemade Addon image (see below)
Stacks Image 119
Text block settings
Show or hide all text blocks. Aling text (left right or centered) define the height, margin and padding settings. Play with the settings and see what happens.
Lightbox
ATTENTION!
Embed a lightbox to your image Gallery (mark include), if you use multiple image galleries include the lightbox only ones and exclude it in the other galleries !!

Trigger the lightbox
If you want to trigger the lightbox, click on your image and open the link inspector from rapidweaver, add a custom attribute with name: rel and a value : prettyPhoto -> this setting will open your image (singel image) in a lightbox. If you want to trigger a group of images, add to each image (from the group you want to make) a link: with rel: prettyPhoto[gallery1] -> text between the brackets can be anything you want
Overlay color and opacity
You can choose your own overlay color and define the opacity from this color
Autoplay Slideshow and interval time
with this feature you can make a slideshow (play's automaticaly) with a specific interval time (milliseconds)
Show Title
Titles can be set inside the link inspector from rapidweaver (custom attributes) and show up on the bottom of your image, on the right side from the arrows
Show Alt Tag
can be found if you click on the image (image popup's with all the image settings), see inside the hud -> image publishing -> Alt Tag. This text block appear above the lightbox popup (on the left side)
Show Thumbnails
You can add a thumbnail navigation inside your lightbox with small images to navigate trough your image gallery
Show Navigation
You can hide the navigation buttons if you use Thumbnails to navigate. (only in a group of images)
Allow resize image
Big images can be scaled (to the original size) If the image is bigger then the predefined Default width and height. You'll see a button (top right side) to scale the image to 100%
Choose Theme
There are 5 lightbox themes included
Social Media
Enable the social media buttons like twitter and facebook and position these buttons (from the top) untill it looks ok for you
Trigger Add-on on Hover
This feature detects the link you added on the image and places this link on the add-on image. If you unmark this feature the add-on image doesn't have a link - this can be usefull if you make for example a image gallery with a logo above the image (see example page: example 2)
Hover Glow - Inner Glow
Depending the hover style you choose (with glow) you can change the color and thickness from the glow
Hover style
Each style will enable or disable features necessary for the selected style.
Position Hover Image
If you use the build-in or a homemade hover image you can position that image, centered or a specific position (see example 4 - example page)
TextBlock on Top
If your text block, for some reason, appears beneath the add-on image you can mark this checkbox (only vissible in preview mode)
BoxToggler Link
BoxToggler link: can trigger your boxtoggler (settings see manual boxToggler). This feature CANNOT be used together with a lightbox !!