mocha slider problem

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
11/13/2012 3:12:32 AM
Gravatar
Total Posts 17

mocha slider problem

Hi,

I have little experience with mojoportal CMS, but i find it is very useful. Anyway, I  am fond of Mocha skin and trying to add

mocha free slider but it not working. I followed some user manual steps found in mocha skin download folder, but my slider is

static, nothing happened, only first slide is showing.

Here is script I use:

Copy and paste the following HTML into an HTML Content Instance, and then add/remove the images and text as you need, to create your Mocha Content Slider.

<div class="clearfix" id="contentslider">
<div class="slidercontainer clearfix">
<!-- First Slide -->
<figure class="contentslide ui-tabs-panel" id="slide-1">
<img alt="Cafe_Latte" src="/Data/Sites/20/skins/i7media-template2/images/Cafe_Latte.jpg" /> <figcaption class="slidecaption">Mocha is a free mojoPortal skin</figcaption></figure>
<!-- Second Slide -->
<figure class="contentslide ui-tabs-panel ui-tabs-hide" id="slide-2">
<img alt="Latte" src="/Data/Sites/20/skins/i7media-template2/images/Latte_art_cappuccino.jpg" /><figcaption class="slidecaption">Mocha is a free mojoPortal skin</figcaption></figure>
<!-- Third Slide -->
<figure class="contentslide ui-tabs-panel ui-tabs-hide" id="slide-3">
<img alt="Milk" src="/Data/Sites/20/skins/i7media-template2/images/Milk_Caffe_latte.jpg" /> <figcaption class="slidecaption">Mocha is a free mojoPortal skin</figcaption></figure>
<!-- Fourth Slide -->
<figure class="contentslide ui-tabs-panel ui-tabs-hide" id="slide-4" style="">
<img alt="Latte" src="/Data/Sites/20/skins/i7media-template2/images/Latte_art_cappuccino.jpg" /> <figcaption class="slidecaption">Mocha is a free mojoPortal skin</figcaption></figure>
</div>
<div class="slidercontrols clearfix">
<ul class="controllist ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#slide-1">Slider 1 link</a></li>
<li class="ui-tabs-nav-item">
<a href="#slide-2">Slider 2 link</a></li>
<li class="ui-tabs-nav-item">
<a href="#slide-3">Slider 3 link</a></li>
<li class="ui-tabs-nav-item">
<a href="#slide-4">Slider 4 link</a></li>
</ul>
</div>
</div>

What I can try? What is problem/ solution?

Thanks in advance!

11/13/2012 5:45:28 PM
Gravatar
Total Posts 355

Re: mocha slider problem

First question would be: where are you referencing your javascript/jquery files (are you using the whole mocha skin, or just the slider from it)?

11/13/2012 10:50:23 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: mocha slider problem

Hello Markoni22,

I should point out that the image sources in the HTML you posted are probably wrong - they're the same as they are on the mocha.mojoskins.com site (I.E., src="/Data/Sites/20/skins/i7media-template2/images/Cafe_Latte.jpg").

You'll need to change them to match the path for your site. A normal path for a single-site installation running the Mocha skin would be like this: src="/Data/Sites/1/skins/i7MEDIA-Mocha/images/Cafe_Latte.jpg"

Also, if you contact i7MEDIA directly, we may be able to offer to some better assistance. You can submit a request for help from this link: http://mocha.mojoskins.com/request-help.aspx

Hope this helps,
-Isaac

11/14/2012 1:23:25 AM
Gravatar
Total Posts 17

Re: mocha slider problem

Thanks for reply,

My mocha slider still doesn't work. I use mocha skin on site. Also picture sources are good.

When I open page with slider first slide is showed. Slide rotate doesn't work. Clicking on other slider link open that slide.

That is how that work this moment.

 

Any idea?

Thanks!

11/14/2012 2:59:15 AM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: mocha slider problem

If clicking the links brings you to the next slide, then the jQuery is initializing, which means something is stopping it from sliding on interval.

I can think of two things that might cause this:

  1. The slider is set up to pause on hover, so if the element that is containing the slide was somehow covering the whole screen, that would cause the slider to stop.
  2. If you've changed your site to use a different version of the jQuery UI than Mocha was designed to use, it might break the slider. Mocha was set up to run jQuery UI version 1.8.16. If you've set up the site with 1.9.0 or higher it would require a change in the way the function is called. If this is the case, tell me and I will send you instructions on how to fix the slider to work with the new version.

I'll let you know if I have any more ideas. Being able to look at the site in question would help a lot, can you give me a link to the page that you have your slider on?

Thanks,
-Isaac

 

11/14/2012 3:57:00 AM
Gravatar
Total Posts 17

Re: mocha slider problem

Hi,

you were right, site is running 1.9.0 jquery ui version.

Send me instruction you mentioned, please!

 

11/14/2012 4:39:11 AM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: mocha slider problem

If you've already got the 1.9.0+ UI CSS installed from a themeroller, follow these instructions.

  1. Download this file from github: https://github.com/cmcculloh/jQuery-UI-Tabs-Rotate/blob/master/jquery-ui-tabs-rotate.js
  2. Copy the file into the "scripts" folder in the Mocha skin folder on your server. (data/sites/[site-number]/skins/i7MEDIA-Mocha/scripts)
  3. Open your layout.master. Scroll to line 18. Create a new line under 18 and paste the following:<portal:SkinFolderScript ID="sfs3" runat="server" ScriptFileName="scripts/jquery-ui-tabs-rotate.js" AddToCombinedScript="true" />
  4. Make sure you have "AssumejQueryUiIsLoaded="true" on your ScriptLoader on line 24.
  5. Open the "script.js" file inside the scripts folder.
  6. Select the content from lines 56-68 and replace it with the following:
    // For the Content Slider
    $("#contentslider").tabs().tabs("rotate", 5000, true);
    $("#contentslider .slidercontainer").hover(
    function() {
    $("#contentslider").tabs().tabs("rotate", 0, true);
    }, function() {
    $("#contentslider").tabs().tabs("rotate", 5000, true);
    }
    );

If you don't have a new UI theme installed that uses v1.9.0+, please change back to using the default UI version that mojoPortal loads, because the UI theme in Mocha is not compatible with the new version of the UI either.

Because of the changes in the new jQuery UI version, I may rewrite the Mocha Slider in the newest version of the skin that we'll be releasing soon, and set it up to use a custom script so that compatibility with the new version of the UI isn't a problem.

Let me know if you still have trouble after following these instructions.

Hope this helps,
-Isaac

 

11/14/2012 5:41:23 AM
Gravatar
Total Posts 17

Re: mocha slider problem

Not working for me.

But I don't understand what means " If you don't have a new UI theme installed that uses v1.9.0+, please change back to using the default UI version that mojoPortal loads, because the UI theme in Mocha is not compatible with the new version of the UI either."

Anyway, when you mentioned above that Mocha slider wouldn't work with jquery ui 1.9 version, I changed that in web.config to 1.18.16 and after that my Mocha slider worked properly. But I guess that is not solution.

11/14/2012 5:45:20 AM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: mocha slider problem

The Mocha skin was designed to use the older version. We'll release an update soon that will make it work for the new version too, but until then you should leave it at 1.8.16.

Both the slider and the UI Theme require the older version, so unless you're adding your own UI theme that uses the new features of version 1.9.0, there's no reason to update just yet.

You must sign in to post in the forums. This thread is closed to new posts.