4images Modifications / Modifikationen > Mods & Plugins (Releases & Support)

[Mod] Slideshow with "highslide"

(1/2) > >>

Rembrandt:
Hi!

Slideshow with "highslide"
Slideshow for Categories, Lightbox and in the Detailpage can you the background from the image dimming.

Demo

1.) Copy the files from attachment in your root, note the folder structure

2.) search in header.html:

--- Code: ---{if has_rss}

--- End code ---
insert above:

--- Code: ---<script type="text/javascript" src="./js/highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="./js/highslide/highslide.css" />
<script type="text/javascript">
  hs.graphicsDir = './js/highslide/graphics/';
  hs.align = 'center';
  hs.anchor = 'top';
  hs.transitions = ['expand', 'crossfade'];
  hs.wrapperClassName = 'dark borderless floating-caption';
  hs.fadeInOut = true;
  hs.dimmingOpacity = .92;

  // Add the controlbar
  if (hs.addSlideshow) hs.addSlideshow({
    slideshowGroup:'thumb1',
    interval: 3500,
    repeat: true,
    useControls: true,
    //fixedControls: 'fit',
    fixedControls: false,
    overlayOptions: {
      opacity: .6,
      position: 'bottom center',
      hideOnMouseOut: true
    }
  });
</script>

--- End code ---

3.) search in your templates/categories.html

--- Code: ---<a href="{url_top_images}"><b>{lang_top_images}</b></a>&nbsp;

--- End code ---
insert above:

--- Code: ---<a href="{media_src}" onclick="return hs.expand(this, {slideshowGroup:'thumb1', autoplay:true})"><b>Slideshow</b></a>&nbsp;

--- End code ---

4.) search in your templates/details.html:

--- Code: ---{lightbox_button}

--- End code ---
insert above:

--- Code: ---<a href="{media_src}" onclick="return hs.expand(this, {captionId: 'caption1'})" nowrap >only&nbsp;Image</a>

--- End code ---

5.) search in your templates/lightbox.html:

--- Code: ---<a href="javascript:clearlightbox()"><b>{lang_delete_lightbox}</b></a>

--- End code ---
insert above:

--- Code: ---<a href="{media_src}" onclick="return hs.expand(this, {slideshowGroup:'thumb1', autoplay:true})"><b>Slideshow</b></a>&nbsp;

--- End code ---

6.) search in your templates/thumbnail_bit.html:

--- Code: ---{thumbnail}<br />

--- End code ---
insert below:

--- Code: ---<a href="{media_src}" onclick="return hs.expand(this,{slideshowGroup:'thumb1',autoplay:true})"></a><br>

--- End code ---

mfg Andi

Jan-Lukas:
Hallo Andy,
Wie immer TOP
Eine Frage, wo kann ich mein Spacer Bild und Wasserzeichen eingeben

LG Harald

Edit:

und zwar in dieser Form eingeloggt/ nicht eingeloggt


--- Code: ---<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="{media_src}">
      {if user_loggedin}<img src="{template_url}/images/spacer.gif" border =" 0" alt="{image_name}" {width_height}usemap="#navi" border="0" vspace="0" hspace="0" align="absmiddle" /><br />{endif user_loggedin}
    </td>
<td background="./watermark.php?img={media_src}">
{if user_loggedout}<img src="{template_url}/images/spacer.gif" border =" 0" alt="{image_name}" {width_height}usemap="#navi" border="0" vspace="0" hspace="0" align="absmiddle" /><br />{endif user_loggedout}
</td>
  </tr>
</table>
--- End code ---

Rembrandt:
Hi!

wenn du in z.b der detals.html statt:

--- Code: ---<a href="{media_src}" onclick="return hs.expand(this, {captionId: 'caption1'})" nowrap >only&nbsp;Image</a>

--- End code ---
Das schreibst:

--- Code: ---<a href="./watermark.php?img={media_src} " onclick="return hs.expand(this, {captionId: 'caption1'})" nowrap >only&nbsp;Image</a>

--- End code ---
Funktionert das "Watermark" Bild?

mfg Andi

Jan-Lukas:
Danke, werde das ? mal ausprobieren  :wink:

So, habe es in der Kategorie eingebaut
href="./watermark.php?img={media_src} " onclick="return hs.expand(this, {slideshowGroup:'thumb1', autoplay:true})"><b>Slideshow</b></a>&nbsp;
Das erste Bild klappt auch, nur ab dem 2. ist es wieder ohne Wasserzeichen.

LG

PS. in der detail dreht das Teil dann durch (läd ohne Ende)
brauche es aber auch dort nicht.

Rembrandt:
hm.. versuch mal das gleiche in  der thumbnail_bit.html

Navigation

[0] Message Index

[#] Next page