The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make a slideshow widget?

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Solved How to make a slideshow widget?

Post by Klemen on February 28th 2012, 4:52 pm

A preview of what I'd like to have on my forum: http://www.explosm.net/comics/57/

I need exactly something like this. (I know that forum is vBulletin, just wondering if that's possible on phpbb).

Just one or more pictures on the page and three buttons for previous,next and random. Any idea?


Last edited by Klemen on March 5th 2012, 11:08 pm; edited 2 times in total

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klonoa on February 28th 2012, 7:05 pm

Well you can either make a HTML page or setup something like that on your portal.

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on February 28th 2012, 8:04 pm

But then I would have to make a new HTML for every picture...

You can't do that on a portal... If you know how please tell.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on February 29th 2012, 1:16 am

If you look at this: http://www.avacweb.com/t23-6-member-alerts-pop-up-box

Its basically a slideshow pop up but with words. All you have to do is swap the words for images, and it will be close to what your asking. For it to not be a you'll need to change a bit of CSS.
You'll also need to get rid of these lines:
Code:
var checkalert=my_getcookie('mempop');
if (checkalert == "yes") {
document.getElementById('mempop').style.display="none";
}else { document.getElementById('mempop').style.display="block";}

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on February 29th 2012, 7:20 pm

Made everything like in your tutorial, but after i deleted those lines you said above, the pop up doesent show up anymore :/

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on February 29th 2012, 9:01 pm

Oh sorry I missed something,

Find in the HTML, this: style="display:none"
You'll see it twice in total, get rid of the first occurrence of that.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on February 29th 2012, 9:46 pm

Thanks, worked like a charm! Now... There are two buttons: don't display again and next. I certainly won't need the "don't display again button", but i was also wondering if you could tell me how to do a "previous" button, "newest" and "first" button.

Also, is it possible to create that the popup would always start at the last page?





EDIT: I found this site: http://jsmadeeasy.com/javascripts/Images/Image%20Gallery/list.htm and this is exactly what I need, but I don't know 2 things:

- how to add images
- when do the images load up? (all at the start or one by one, as you press the buttons???)

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on February 29th 2012, 11:42 pm

I'm going to basically re write the script for you, and i'll make sure those buttons are included for you. Wink
Won't be long.

Edit:

Okay here we go.
Remove all the HTML you had previously from it, but leave the CSS in your CSS.

Put this as the new HTML in a widget or announcement or homepage message.
Code:

<script type="text/javascript">
var slideShow=[];
slideShow[0]="IMAGE 1";
slideShow[1]="IMAGE 2";
slideShow[2]="IMAGE 3";
slideShow[3]="IMAGE 4";
//and so on...

//the starting slide. Leave as this to start on the last one.
var curSlide = slideShow.length-1;

function slideChange(type) {
    switch(type) {
      case 'next':
         curSlide++;
         if (curSlide==slideShow.length) { curSlide=0; }
         break;
      case 'prev':
         curSlide--;
         if(curSlide<0){ curSlide=slideShow.length-1; }
         break;
      case 'random':
         curSlide=Math.floor(Math.random()*slideShow.length);
         break;
      case 'last':
         curSlide=slideShow.length-1;
         break;
      case 'first':
         curSlide=0;
      default:
         curSlide++;
         if (curSlide==slideShow.length) { curSlide=0; }
   }         
   document.getElementById('slideShowslide').innerHTML=slideShow[curSlide];      
   document.getElementById('pageno').innerHTML="Slide: "+ (curSlide+1) + " of " + slideShow.length;
}
</script>
<div id="mempop" class="LGpopup">
<div onclick="document.getElementById('mempop').style.display='none';"><img src="http://illiweb.com/fa/empty.gif" class="closebutton" width="20px" height="20px" /></div>
<h1>Slideshow</h1>

<p id="slideShowslide"></p>

<span id="pageno"style="float:right;margin-right: 5px;"></span>
<br><br>
<div style="text-align: center; margin-bottom: 10px;">
<a class="lgbutton" onclick="slideChange('first');">First</a>
<a class="lgbutton" onclick="slideChange('prev');">Previous</a>
<a class="lgbutton" onclick="slideChange('random');">Random</a>
<a class="lgbutton" onclick="slideChange('next');">Next</a>
<a class="lgbutton" onclick="slideChange('last');">Last</a>
</div>
</div>
<script>slideChange('last');</script>

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 1st 2012, 12:47 am

Yep it works. The only problem is that I don't know how to add an image... (I'm a noob ikr).

Btw there a bug. When I press "first" it goes to image 2 instead of 1.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 1st 2012, 3:24 am

To fix the bug.
-find this line : 'default:'
- right above it add this: 'break;'
So it looks like this:
break:
default:

And here is how a HTML image should be:
http://www.w3schools.com/html/html_images.asp

Let me know ig you need anymore help.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 1st 2012, 7:29 am

Did I do this right?

Code:
slideShow[0]="<img src="http://iruntheinternet.com/lulzdump/images/gifs/1233087193.gif">";

Nothing shows up in the pop up though...

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 1st 2012, 1:06 pm

Not quite.
You see how you start it with a double quote mark and then use another quote mark after 'src=', well it's considering that as the end of the line.
You'll need to start and end the sentence with single quote marks.

Like so:
slideShow[0]='<img src="http://iruntheinternet.com/lulzdump/images/gifs/1233087193.gif">';

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 1st 2012, 3:00 pm

Thanks for the lesson Razz it worked!

Now just a few more things. Here's the link: http://greenchip.playogame.com/portal

- if you go to the first image on your pop up you see the problem. Is it possible for for the pop up to adjust the width (currently it only adjusts to height)

- also the "last button" is pushed into another line

- is it possible to make transition effects?

- how to make the pop up appear lower on the site?

- currently it's kinda annoying pressing the buttons (especially on a small mobile screen). But that would be fixed if the buttons would be above the image?

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 1st 2012, 3:37 pm

Okay go to the CSS, and find this:
.LGpopup {
position: absolute; background-color: #FFF; border: 3px solid; top: 20%;
left: 30%; border-radius: 8px; color: #105289; width: 40%;
}


and change it to this:
.LGpopup {
position: absolute; background-color: #FFF; border: 3px solid; top: 20%;
margin: 1px auto; border-radius: 8px; color: #105289; min-width: 40%; max-width: 60%;
}

That would solve a few issues.

To move it further down or further up, find in the snippet of CSS above this: 'top: 20%;' - that figure is how far it is from the top, so just decrease it or increase it to your liking.

To move the buttons above the image move this snippet of HTML:
Code:

<div style="text-align: center; margin-bottom: 10px;">
<a class="lgbutton" onclick="slideChange('first');">First</a>
<a class="lgbutton" onclick="slideChange('prev');">Previous</a>
<a class="lgbutton" onclick="slideChange('random');">Random</a>
<a class="lgbutton" onclick="slideChange('next');">Next</a>
<a class="lgbutton" onclick="slideChange('last');">Last</a>
</div>
Above this:
<p id="slideShowslide"></p>

Regarding transitions, its possible, but what type of transitions are you looking for?

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 1st 2012, 4:01 pm

Hm... I don't even know if I want transitions now. Transitions are only good if all images are the same size, here it wouldn't make really sense anyway.

Edit: yes everything works, but there's another problem... Since I moved all the buttons above the image, there is no more wrap around the image, but only around the buttons.

(check the link in my previous post and go to image 1 to see what I mean)

Also: is it possible for this pop up to be "fixed"? Because currently I have it set to 35% below the top. But it appers lower if you rotate the (mobile) screen, because the portrait has more height than landscape. Could I fix this by changing the value to pixels instead of percentage?

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by MrMario on March 1st 2012, 10:28 pm

Hello,

Please change the title of your topic, so that others may find the solution to this question/issue.

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 1st 2012, 11:34 pm

It seems you moved to much Razz

Yes you can set it to pixels and it will always be a fixed amount from the top.

Here's a whole replacement code, which should fix your buttons issue:

Code:


        <script type="text/javascript">
        var slideShow=[];
        slideShow[0]="IMAGE 1";
        slideShow[1]="IMAGE 2";
        slideShow[2]="IMAGE 3";
        slideShow[3]="IMAGE 4";
        //and so on...

        //the starting slide. Leave as this to start on the last one.
        var curSlide = slideShow.length-1;

        function slideChange(type) {
            switch(type) {
              case 'next':
                curSlide++;
                if (curSlide==slideShow.length) { curSlide=0; }
                break;
              case 'prev':
                curSlide--;
                if(curSlide<0){ curSlide=slideShow.length-1; }
                break;
              case 'random':
                curSlide=Math.floor(Math.random()*slideShow.length);
                break;
              case 'last':
                curSlide=slideShow.length-1;
                break;
              case 'first':
                curSlide=0;
              default:
                curSlide++;
                if (curSlide==slideShow.length) { curSlide=0; }
          }       
          document.getElementById('slideShowslide').innerHTML=slideShow[curSlide];     
          document.getElementById('pageno').innerHTML="Slide: "+ (curSlide+1) + " of " + slideShow.length;
        }
        </script>
        <div id="mempop" class="LGpopup">
        <div onclick="document.getElementById('mempop').style.display='none';"><img src="http://illiweb.com/fa/empty.gif" class="closebutton" width="20px" height="20px" /></div>
        <h1>Slideshow</h1>
        <div style="text-align: center; margin-bottom: 10px;">
        <a class="lgbutton" onclick="slideChange('first');">First</a>
        <a class="lgbutton" onclick="slideChange('prev');">Previous</a>
        <a class="lgbutton" onclick="slideChange('random');">Random</a>
        <a class="lgbutton" onclick="slideChange('next');">Next</a>
        <a class="lgbutton" onclick="slideChange('last');">Last</a>
        </div>
        <p id="slideShowslide"></p>
        <span id="pageno"style="float:right;margin-right: 5px;"></span>
        <br><br>
        </div>
        <script>slideChange('last');</script>

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 2nd 2012, 6:46 am

Yes, that worked. But there are some issues when I moved the buttons up. The "last" button is in the second line again and the wrap didn't adjust to the width of the image. Also, the whole pop up wasn't in the center of the screen.

But I have a bigger issue... When I added the image to the slideShow[1] everything just disappeared. There is still the pop up and all the buttons, but there are no images or the text "slide x of y" showing up.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 2nd 2012, 2:18 pm

Its because you second image is on two lines. Meaning you have put a line break in it, ending the string.

Its like this:

slideShow[1]='<img
src="bla bla bla

So it thinks the whole line is '<img', just click in front 'src' and press backspace.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 2nd 2012, 5:05 pm

Sorry, yes there was an extra space, thanks.

But what about other problems? The pop up isn't adjusting to the width of the image and it isn't always in the center of the screen. Got any idea how to fix this, please?

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 3rd 2012, 4:34 pm

Bump :/

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 4th 2012, 3:26 am

Sorry.
Yeah I'd recommend setting a max-height or width in the css for the images.

#mempop img {
max-height: 400px;
max-width: 400px;
}

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 4th 2012, 2:58 pm

This only resized the image... Doesn't matter anyway. I'm planning to have all images on the same width then.

Do you have any idea how I could center the pop up? Because currently it's moved a bitto right.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 4th 2012, 3:40 pm

Yes find this bit of css:
.LGpopup {
position: absolute; background-color: #FFF; border: 3px solid; top: 20%;
margin: 1px auto; border-radius: 8px; color: #105289; min-width: 40%; max-width: 60%;
}

and change to this:
.LGpopup {
position: absolute; background-color: #FFF; border: 3px solid; top: 20%; left: 20%;
margin: 1px auto; border-radius: 8px; color: #105289; width: 60%;
}

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 4th 2012, 5:50 pm

Yes, that worked. Just one last thing... How do I fix the "Last" button - it's in the second line.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 4th 2012, 8:38 pm

making the font smaller or the box wider.

I'd recommend changing the CSS from the last psot to this:
.LGpopup {
position: absolute; background-color: #FFF; border: 3px solid; top: 20%; left: 15%;
margin: 1px auto; border-radius: 8px; color: #105289; width: 70%;
}

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 4th 2012, 11:02 pm

Is it possible to implement a "Facebook like" button to each slide?

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 5th 2012, 10:43 pm

Bump. Just a simple yes or no Smile

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by LGforum on March 5th 2012, 10:51 pm

yes, but its more than just a little javascript then.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to make a slideshow widget?

Post by Klemen on March 5th 2012, 11:06 pm

Thanks, I won't bother you with this now Razz

Solved.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum