Jcarousel Category Scroller problem

Welcome, Guest

(1 viewing) (1) Guest

Page:
1

TOPIC: Jcarousel Category Scroller problem

Jcarousel Category Scroller problem 2 years, 6 months ago #520

hazelnuts89 OFFLINE Fresh Boarder Posts: 9	Hi, I tried to make my scroller similar with this website www.fsksm.utm.my but failed. How to do it? My website is research.gates.my TQ
	Reply Quote

Re:Jcarousel Category Scroller problem 2 years, 6 months ago #522

nicholas
OFFLINE
Moderator
Developing for Joomla since it was born!
Posts: 1197

Aren't they with the same organization as you are? If so, can't you share their code?

If not, then I suggest getting the Firebug plugin for Firefox. That gives you the option to 'inspect' the element and see their styling. If you look at their styling under Firebug, you see this:

<div style="height: 130px;">
<div class=" jcarousel-skin-tango">
<div class="jcarousel-container jcarousel-container-horizontal" style="display: block;">
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"/>
<div class="jcarousel-next jcarousel-next-horizontal jcarousel-next-disabled jcarousel-next-disabled-horizontal" style="display: block;"/>
<div class="jcarousel-clip jcarousel-clip-horizontal">
<ul id="carousel" class="jcarousel-list jcarousel-list-horizontal" style="width: 1341px; left: -447px;">
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="width: 133px;">
</li>
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="width: 133px;">
</li>
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" jcarouselindex="3" style="width: 133px;">
</li>
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" jcarouselindex="4" style="width: 133px;">
</li>
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" jcarouselindex="5" style="width: 133px;">
</li>
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal" jcarouselindex="6" style="width: 133px;">
</li>
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal" jcarouselindex="7" style="width: 133px;">
</li>
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" jcarouselindex="8" style="width: 133px;">
</li>
<li class="photo jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal" jcarouselindex="9" style="width: 133px;">
</li>
</ul>
</div>
</div>
</div>
</div>

Yours looks different:

<div class="block last">
<div class="frpos.showcase3">
<div class="frpos.showcase3">
<div class="">
<div class="moduletable">
<div class="module-padding">
<div id="VMJScroller0">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
<script src="http://research.gates.my/modules/mod_vm_jcategory_scroller/js/jquery-1.2.6.js" language="javascript">
</script>
<script src="http://research.gates.my/modules/mod_vm_jcategory_scroller/js/jquery.jcarousel.pack.js" type="text/javascript">
</script>
<link href="http://research.gates.my/modules/mod_vm_jcategory_scroller/js/jquery.jcarousel.css" type="text/css" rel="stylesheet">
</link>
<link href="http://research.gates.my/modules/mod_vm_jcategory_scroller/js/skins/default/skinFull0.css" type="text/css" rel="stylesheet">
</link>
<script type="text/javascript">
</script>
<div class=" jcarousel-skin-category0">
<div class="jcarousel-container jcarousel-container-horizontal" style="display: block;">
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;" disabled="false"/>
<div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"/>
<div class="jcarousel-clip jcarousel-clip-horizontal">
<ul id="mycatcarousel0" class="jcarousel jcarousel-list jcarousel-list-horizontal" style="width: 1280px; left: -320px;">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="width: 138px;">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="width: 138px;">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" jcarouselindex="3" style="width: 138px;">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" jcarouselindex="4" style="width: 138px;">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" jcarouselindex="5" style="width: 138px;">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal" jcarouselindex="6" style="width: 138px;">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal" jcarouselindex="7" style="width: 138px;">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" jcarouselindex="8" style="width: 138px;"/>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

If I were doing the customization, I would re-install the module to get back to standard code. I would then copy their arrow (if that is the arrow style you want) and apply the arrow. I would also be careful with my template's styling of the module position. That can impact as well. I would then use Firebug to really dig into the CSS that has been applied to the other site, and start to implement that CSS in the scroller.

Nicholas
CIO - CorFun, Inc.
Publisher - orthodoxbiz.com
Webmaster - Orthodox Christian Network

Reply Quote

Re:Jcarousel Category Scroller problem 2 years, 6 months ago #523

hazelnuts89 OFFLINE Fresh Boarder Posts: 9	I tried this before but result isn't the what I want (maybe because I input the wrong coding). Plus, I'm abit confuse and need help on which part should be taken. I'm not really a pro here. Add more, I think there's some glitch when refreshing the Google Chrome (or other browser like Safari), the picture/thumbnails inside the scroller does not stay put. What actually causing this problem?
	Last Edit: 2 years, 6 months ago by hazelnuts89. Reply Quote