Jquery Promo Image Slideshow and Design Box

This is a jquery image slide show based on the GalleryView jquery plugin,  For more information on this plugin, visit this link:

http://spaceforaname.com/galleryview

The attached zip file contains a replacement _header.html file, and a replacement page_1.html file, as well as a gallery view directory where the scripts, css, and gallery images are placed. 

To use this, first rename your _header.html file to _header.html.bak and your page_1.html file to page_1.html.bak.  Your tmpl_uni directory won't have these files by default, unless you added them.  You can upload this to any template directory, just don't overwrite any files, so that the changes will be easy to undo if you want to,

Upload the gallery view directory to your sites templates/tmpl_SomeTemplate (The new _header.html and page_1.html file are uploaded here also)

Once the files are uploaded, clear your cache directory, and do a hard refresh on your home page to see the changes.

Every promo image has a text overlay with a title and a description.  To change these, you'll have to add language keys... the language key name will be the same as the text that you see when the gallery is installed.

This also adds a design box to the right of the gallery,  You'll have to add language keys for the title and content.  The looks of this are very customizable,  Study the attached files and visit the authors website for more information.  Here's a demo that is similar in looks to this one:

http://spaceforaname.com/galleryview-3.0/tutorial_h.html

Slide show configuration options can be found in _header.html  All the sample images I've provided are just one solid color.  You'll have to create your own images.  They should all be 650px x 366px (16:9 aspect ratio)  The design bos to the right of the slid show can hold text, an embedded video, or whatever html you want to put in it.

Demo video attached

List of configuration options, found in _header.html

transition_speed: 800,                //INT - duration of panel/frame transition (in milliseconds)
transition_interval: 4000,            //INT - delay between panel/frame transitions (in milliseconds)
easing: 'swing',                    //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
pause_on_hover: false,                //BOOLEAN - flag to pause slideshow when user hovers over the gallery
show_panels: true,                    //BOOLEAN - flag to show or hide panel portion of gallery
panel_width: 600,                    //INT - width of gallery panel (in pixels)
panel_height: 400,                    //INT - height of gallery panel (in pixels)
panel_animation: 'crossfade',        //STRING - animation method for panel transitions (crossfade,fade,slide,zoomOut,none)
overlay_opacity: 0.7,                //FLOAT - transparency for panel overlay (1.0 = opaque, 0.0 = transparent)
overlay_position: 'bottom',            //STRING - position of panel overlay (bottom, top)
panel_scale: 'crop',                //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, nocrop = scale image and preserve original aspect ratio)
show_panel_nav: true,                //BOOLEAN - flag to show or hide panel navigation buttons
show_overlays: false,                //BOOLEAN - flag to show or hide panel overlays
show_filmstrip: true,                //BOOLEAN - flag to show or hide filmstrip portion of gallery
frame_width: 60,                    //INT - width of filmstrip frames (in pixels)
frame_height: 40,                    //INT - width of filmstrip frames (in pixels)
start_frame: 1,                        //INT - index of panel/frame to show first when gallery loads
filmstrip_size: 3,                    //INT - number of frames to show in filmstrip-only gallery
frame_opacity: 0.3,                    //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
filmstrip_style: 'scroll',            //STRING - type of filmstrip to use (scroll, show all)
filmstrip_position: 'bottom',        //STRING - position of filmstrip within gallery (bottom, top, left, right)
show_filmstrip_nav: true,            //BOOLEAN - flag indicating whether to display navigation buttons
frame_scale: 'crop',                //STRING - cropping option for filmstrip images (same as above)
frame_gap: 5,                        //INT - spacing between frames within filmstrip (in pixels)
show_captions: false,                //BOOLEAN - flag to show or hide frame captions
pointer_size: 8,                    //INT - Height of frame pointer (in pixels)
animate_pointer: true                //BOOLEAN - flag to animate pointer or move it instantly to target frame

Not all of these options are used in this example

If you want to use something besides the standard design box used in this example, look for the code below toward the end of page_1.html

</div>
<div class="disignBoxFirst" id="_Promo_Block_Box">
<div class="boxFirstHeader"><div class="dbTitle"><bx_text:_promo_Block_Title /></div></div>
<div class="boxContent"><div class="dbContentHtml"> <bx_text:_promo_Block_Content /></div></div>
</div>
</div>

Remove all the code in red.  You will find the css for this section in _header.html  (Which you can move to index.css if you want to)

You'll have to add more rules so the css looks something like this:

#_Promo_Block_Box {
background-image: url(image path); /* optional */
background-color: #FFFFFF;
background-position: top left;
background-repeat:no-repeat;
color: #333333;
font-size: 12px;
width:340px;
float:right;
height:415px;
overflow-x:hidden;
overflow-y:auto;
}

After removing the code in red, it should look like this:

</div>
<div id="_Promo_Block_Box">
Put your custom html code here
</div>
</div>

If you want to add text using a custom language key, us code like this: <bx_text:_Custom_Language_Key_Name/>  This is useful if you want to have text that will translate when languages are changed.  Then just add your new language key in admin.

cool beans   thanks.

Thanx

thank you for this gallery

but I have a problem  - and it is not possible to click on  submenu the links

as the image attached

you have a solution

thank you

Open _header.html for editing, and find the code below:

#myGallery {
float:left;
}

Change to this, save file to server, clear /cache directory, hard refresh the page, and let me know if it works:

#myGallery {
float:left;
z-index:10 !important;
}

perfect - thank you

you think it's possible - that the gallery and block promotion - is not visible to members

Not with this particular method.  It would need a different approach.  I'll give it some thought.

I know there's probably a better way to do it, this worked for me.  Open index.php in your sites root for editing, add the code in red just before the closing php tag and save.

PageCode();

if(isMember()) {
print '<style>.Promo_Gallery_Wrapper {display:none;}</style>';
}

?>

I do not know if there is a better way - but it's good for me - a big thank you

Make sure the images, and whatever media that you use are optimized so that file sizes are as small as possible.  The biggest problem with what I've done, is that everything in the promo block is always sent to the client computer even when the user is logged in..... it's just not displayed.  The optimal way would be for the server to never send the promo block for logged in users, but that would require a completely different method of implementing the slideshow.

How can we add links on each image?

How can we put this rotator into a HTML BLOCK?

 Ok i put this in a html box but its aligned to the left.. how to make this at center.?

Hi! First of all, thank you for this great code!

However it doesn't seems to work on IE, any idea why?

The very first sentence, of the very first post of this thread, tells you what this is based on.  I suggest visiting that site.

 Is this the problem?... https://github.com/jackwanders/GalleryView/issues/15

We don't really know what the issue is.  All that was said was "doesn't work".  We don't know what version of IE, or any other details.  No screenshots....nothing.  Until my new crystal ball arrives from overstock.com, I have no idea.

I've had some trouble with IE8... unfortunately there are still a lot of people using XP and many of those also seem to be stuck on using IE as their browser of choice... where IE8 is as high as they can go.  Many have found that IE8 has a problem with opacity settings... just can't deal with it... forcing developers to add an IE browser hack to get it working.

See http://stackoverflow.com/questions/4615147/problem-with-opacity-in-ie8

THanks :D

Hi,
Can someone clearly explain how to resize (horizontally and vertically) promo block in Dolphin 7.0.9? I went through the forum, unfortunately, none of the methods I found seem to work.
Your assistance will be highly appreciated.

Thanks

I know this is an old topic but was wondering how hard to adapt to 7.1.x..

This one is very nice.

I don't know Newton; I have been using the ivew slider on 7.1.x and it works very well and has a lot of features including html links.  The ivew slider has been discontinued and replaced with a licensed one but you can still obtain the ivew one as well and the webpage still exists with all the examples.  I use the promo box to hold the slider contents so I can hide it using the switch in the admin settings.  I edit the code to use a different design box for the promo box instead of 3 because I did not know if design box 3 was used anywhere else in Dolphin.

http://iprodev.com/2012/07/iview/

scroll down the page and you will see the demo and download buttons.

Thanks.

 RE:

 I just tried visiting the authors site and got an internal server error, so there are probably a lot of better choices than 'GalleryView' for a jQuery slide show.

Hi houstonlively 

Can this slider be used to replace the photos slider on the groups module?

** And a little bit of help to understand something:

The photos slider shown on groups (see attachment), does that work because the photos module is installed or it uses the plugins/jquery and plugins/fancybox... ? or anything else

ThankU

No

 to both questions?

No to the first question, as it is the only one that is pertinent to this topic.

 Thanks 

The Galleryview plugin has been dead for three years.  May it rest in peace along with this topic.

I just tried uploading your slider before realizing it says that it is dead.  I undid the changes, but my community is now linking to a different domain.  Can you help with this?

You should create a new topic asking for help and explain what you did.  That way people won't skip reading your post.

I removed the download file so no one else can use this obsolete slider.

I just tried uploading your slider before realizing it says that it is dead.  I undid the changes, but my community is now linking to a different domain.  Can you help with this?

If you really did undo all the changes, I can think of no reason for the behavior you describe, other than you may need to clear your sites /cache folder.

Once in a blue moon, GG says something that resembles sense, and she's done it again... I go with her suggestion of starting a new topic if you still have problems after clearing your cache folder.