about image slide show

[senyor35]

Hello everyone. I want to slideshow for images on top of the forum like jquery carousel with arrows. My forum 2.0.7.. may you help pleasev? Like here: http://www.2asimp3.com

[Dzonny]

Hello there.

I made the same thing for youtube scroller on one of mine forums some time ago...
You'll have to add this code to SimplePortal custom HTML block:

Code Select Expand


<center><div id="wrap">
  <ul id="mycarousel" class="jcarousel-skin-tango" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; height: 200px; width: 1545px;">
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
    <li><img src="www.google.com" width="200" height="150" /></li>
<li><img src="www.google.com" width="200" height="150" /></li>
<li><img src="www.google.com" width="200" height="150" /></li>
<li><img src="www.google.com" width="200" height="150" /></li>
  </ul>
</div></center>

Ofc change img links for each.

Next, open your Index.template.php file and somewhere under the title tag add:

Code Select Expand


<script type="text/javascript" src="http://forumurl.com/scripts/lib/jquery-1.9.1.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="http://forumurl.com/scripts/lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://forumurl.com/scripts/skins/tango/skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery(\'#mycarousel\').jcarousel();
});

</script>


change forumurl to your forum url.

At the end, download and extract attached archive, and upload it to your forums root.

I used this for youtube videos, but should work with images as well. Maybe it will need some style changes, but you can see how it looks and see what to do next...

[senyor35]

Hello Dzonny. Thank you for help me. I did all things what you wrote but it is the result;



Images not to move up.. And this is up-down! I want right and left carousel.. What may I do? Like that;

[Dzonny]

Oh, damn. Are you sure that all paths/urls are correct? You changed 'forumurl' in all places with your correct url to that file?

Let me check this on my test forum and I'll come back here with results. Gimme a bump on pm or here for a few days if I don't respond please.

[senyor35]

Ok dzonny. Waiting your voice, thank you..

[Dzonny]

So, I just tried the same code on my local test forum, and it all works fine.
code that I added in html block:

Code Select Expand


<center><div id="wrap">
  <ul id="mycarousel" class="jcarousel-skin-tango" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; height: 200px; width: 1545px;">
    <li><img src="http://www.dodaj.rs/f/1Z/j8/1KGV8jIf/animals-q-c-200-150-8.jpg" width="200" height="150" /></li>
    <li><img src="http://www.dodaj.rs/f/e/GU/4XmZBSPU/city-q-c-200-150-7.jpg" width="200" height="150" /></li>
    <li><img src="http://www.dodaj.rs/f/46/F2/2qgUCdmv/city-q-c-200-150-9.jpg" width="200" height="150" /></li>
    <li><img src="http://www.dodaj.rs/f/3a/Ql/3s2v7NS3/fashion-q-c-200-150-4.jpg" width="200" height="150" /></li>
    <li><img src="http://www.dodaj.rs/f/29/12l/2xG5rCDu/food-q-c-200-150-6.jpg" width="200" height="150" /></li>
    <li><img src="http://www.dodaj.rs/f/3H/129/3yEuh3nG/nature-q-c-200-150-8.jpg" width="200" height="150" /></li>
    <li><img src="http://www.dodaj.rs/f/1Y/nh/1FobA72R/technics-q-c-200-150-3.jpg" width="200" height="150" /></li>
  </ul>
</div></center>


Also, try to check "no title" and "No boddy" for that block to see if there's changes.

So I guess that you didn't placed codes at the right places or you didn't change url to correct files.
Do you get css file opened when you browse to www.yoururl.com/scripts/skins/tango/skin.css?
Can you please attach your edited index.template.php file to your next message? Also a url to forum would be good.

[senyor35]

I added index.template Dzonny. I did all things as you say but the same view again;

[Dzonny]

Okay, and what exact  code did you added to html block?
Do you have some mods installed on your forum, and jquery library included maybe?

Edit: gotcha, try to remove the code under    // jquery social smfsimple
And let us know about results please.

[senyor35]

Okay, and what exact  code did you added to html block?
Do you have some mods installed on your forum, and jquery library included maybe?

Edit: gotcha, try to remove the code under    // jquery social smfsimple
And let us know about results please.

I have these mods; Childboards as Dropdown, Simple Portal and Aeva..

Where is that code please; "// jquery social smfsimple"

[Dzonny]

Search for it in index.template.php file.

[senyor35]

Oh now; it's horizontal but I thing that there is a problem with the arrows Dzonny?? Look at it here please.

[Dzonny]

Okay, can you please post me the exact code that you added in html block please?
Also check "no title" and "no body" when editing block itself please.

[Dzonny]

Oh, the problem is that you didn't added "http" part to index.template calling of css file, it should be:

Code Select Expand

http://www.mp3sitemiz.com/scripts/skins/tango/skin.css
rather than:

Code Select Expand

www.mp3sitemiz.com/scripts/skins/tango/skin.css

Please fix it and let me know how it looks then...

[senyor35]

Oh, it seems cool Dzonny. Please look it now and tell me if I will fix anything else or not!

[Dzonny]

Yeah, looks just like one on my forum now.
You can play around with style if you want to change something.
I would align those arrow images, just find this classes:
.jcarousel-skin-tango .jcarousel-prev-horizontal and .jcarousel-skin-tango .jcarousel-next-horizontal
and change the "top" value of those to "80px".

[senyor35]

It's all done now  Thank you very much Dzonny and sorry to disturb you...

[Dzonny]

It's all done now  Thank you very much Dzonny and sorry to disturb you...

Glad that it's working fine now!
You're welcome, always a pleasure to help!

[senyor35]

Hey Dzonny again, I see now that when I remove the code under "// jquery social smfsimple" social icons has gone away on top of the forum! How can I use that icons with your slide show please?

[Dzonny]

Oh, so thats what the code is reffering to.
Well, the best would be to contact mod author about it. This slideshow must use that specific jqury version and social share icons obviously dont work with that version.

[senyor35]

Oh, so thats what the code is reffering to.
Well, the best would be to contact mod author about it. This slideshow must use that specific jqury version and social share icons obviously dont work with that version.

All right and the last question about it; pics are 4 in each view. How can I fix 5 or 6 it please?