4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
August 15, 2018, 09:10:16 PM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support) (Moderators: mawenzi, Rembrandt)
| | |-+  [Mod] Slideshow with "highslide"
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
This topic has not yet been rated!
Author Topic: [Mod] Slideshow with "highslide"  (Read 10261 times)
Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 899

Vienna


View Profile WWW
« on: March 03, 2014, 07:56:51 AM »

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:
1
{if has_rss}
insert above:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

3.) search in your templates/categories.html
1
<a href="{url_top_images}"><b>{lang_top_images}</b></a>&nbsp;
insert above:
1
<a href="{media_src}" onclick="return hs.expand(this, {slideshowGroup:'thumb1', autoplay:true})"><b>Slideshow</b></a>&nbsp;

4.) search in your templates/details.html:
1
{lightbox_button}
insert above:
1
<a href="{media_src}" onclick="return hs.expand(this, {captionId: 'caption1'})" nowrap >only&nbsp;Image</a>

5.) search in your templates/lightbox.html:
1
<a href="javascript:clearlightbox()"><b>{lang_delete_lightbox}</b></a>
insert above:
1
<a href="{media_src}" onclick="return hs.expand(this, {slideshowGroup:'thumb1', autoplay:true})"><b>Slideshow</b></a>&nbsp;

6.) search in your templates/thumbnail_bit.html:
1
{thumbnail}<br />
insert below:
1
<a href="{media_src}" onclick="return hs.expand(this,{slideshowGroup:'thumb1',autoplay:true})"></a><br>

mfg Andi

* js.zip (285.79 KB - downloaded 70 times.)
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1280

Thank You
-Given: 153
-Receive: 51


View Profile WWW
« Reply #1 on: March 03, 2014, 10:19:33 AM »

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

1
2
3
4
5
6
7
8
9
10
<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>
« Last Edit: March 03, 2014, 11:42:51 AM by Jan-Lukas » Logged

Danke Harald



Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 899

Vienna


View Profile WWW
« Reply #2 on: March 07, 2014, 08:40:28 AM »

Hi!

wenn du in z.b der detals.html statt:
1
<a href="{media_src}" onclick="return hs.expand(this, {captionId: 'caption1'})" nowrap >only&nbsp;Image</a>
Das schreibst:
1
<a href="./watermark.php?img={media_src} " onclick="return hs.expand(this, {captionId: 'caption1'})" nowrap >only&nbsp;Image</a>
Funktionert das "Watermark" Bild?

mfg Andi
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1280

Thank You
-Given: 153
-Receive: 51


View Profile WWW
« Reply #3 on: March 07, 2014, 05:24:21 PM »

Danke, werde das ? mal ausprobieren  Wink

So, habe es in der Kategorie eingebaut
1
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.
« Last Edit: March 07, 2014, 05:39:40 PM by Jan-Lukas » Logged

Danke Harald



Rembrandt
Moderator
4images Guru
*****
Offline Offline

Posts: 4187

Thank You
-Given: 116
-Receive: 899

Vienna


View Profile WWW
« Reply #4 on: March 07, 2014, 08:06:22 PM »

hm.. versuch mal das gleiche in  der thumbnail_bit.html
Logged

Meine 4Images Modifikationen  Now over 100 Modification Online!    Meine 4images Demo Seite


Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1280

Thank You
-Given: 153
-Receive: 51


View Profile WWW
« Reply #5 on: March 07, 2014, 08:55:31 PM »

Da wird das Wasserzeichen angezeigt, aber immer, ob eingeloggt, oder nicht.
Aber wie gesagt, wollte ja die Slideshow nutzen, nicht ein einzelnes Bild.
Und da sollte es dann auch so funktionieren wie normal (siehe mein Code)

LG Harald

Habe diesen jetzt in der Thumb. eingebaut

1
<a href="./watermark.php?img={media_src} " onclick="return hs.expand(this, {slideshowGroup:'thumb1', autoplay:true})"><b>Slideshow</b></a>

Da ist jetzt auf jedem Bild das Wasserzeichen, aber....
auch wenn eingeloggt unds nicht eingeloggt

Edit:
OK, so sollte es gehen
1
<a href="./watermark.php?img={media_src}&{template_url}/images/spacer.gif" onclick="return hs.expand(this, {slideshowGroup:'thumb1', autoplay:true})"><b>Slideshow</b></a>

jetzt muss ich nur noch hinbekommen, dass das Wasserzeichen halt nur bei nicht eingeloggten angezeigt wird
« Last Edit: March 07, 2014, 09:20:38 PM by Jan-Lukas » Logged

Danke Harald



nobby
4images Guru
*******
Offline Offline

Posts: 2838

Thank You
-Given: 9
-Receive: 73


View Profile
« Reply #6 on: January 19, 2017, 10:50:17 AM »

Hallo "rembrandt"
Hab gestern in der 4images 1.7.11 nach Deiner Anleitung die Modifikationen für die Slideshow vorgenommen.
Funktioniert alles soweit, herzliches Danke dafür.
Leider wird der Bildcounter bei der Slideshow nicht aktualisiert.
Gibt es hierfür eine Möglichkeit ?
Auch habe ich keine Möglichkeit gefunden die Parameter für die Show (ausser mit dem Editor) konfortabel zu verwalten.
LG Rainer

Hallo,

leider hat sich Rembrandt schon vor längerer Zeit hier im Forum veranschiedet.
Du wirst also von ihm keine Antwort bekommen.

nobby
Logged
nobby
4images Guru
*******
Offline Offline

Posts: 2838

Thank You
-Given: 9
-Receive: 73


View Profile
« Reply #7 on: January 19, 2017, 04:28:07 PM »

Hi,

ich kann das da nicht so ganz nachvollziehen.

nobby
Logged
mahsabk
Newbie
*
Offline Offline

Posts: 14

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« Reply #8 on: April 17, 2018, 01:27:08 PM »

good code Laughing
Logged

<a href="http://karenlift.com">بازرسی جرثقیل آسانسور و لیفتراک</a>
<a href="http://karenweld.com">بازرسی جوش</a>
<a href="http://samitechnic.com">تعمیرات لوازم خانگی</a>
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.051 seconds with 20 queries.
Post your comments here