WordPress.org

1. soriya
   Member
   Posted 8 months ago #

   First off, I would like to say that I love this plug-in. Helps me greatly with me site.

   Anyway, after spending a whole afternoon coding a new add-on and a theme from the Skinless theme, i realized that I wasn't able to change the codes for the arrow. I didn't know how to do it with my level of php, which is not that great.

   This is the code provided with the Skinless theme.
   

   <div class="theme-skinless" style="width:<?php echo $config['CAROUSEL_WIDTH']; ?>">
   		<?php if ($config['ARROWS']): ?>
   		<div class="arrow-right"><a href="javascript:stepcarousel.stepBy('carousel_<?php echo $c_id; ?>', -<?php echo $config['SLIDE_POSTS']; ?>)"><?php printf(__('Foward', 'wp_carousel'), $config['SLIDE_POSTS']); ?></a></div>
   		<div class="arrow-left"><a href="javascript:stepcarousel.stepBy('carousel_<?php echo $c_id; ?>', <?php echo $config['SLIDE_POSTS']; ?>)"><?php printf(__('Back', 'wp_carousel'), $config['SLIDE_POSTS']); ?></span></a></div>
   		<div class="clear"></div>
   		<?php endif; ?>
   	</div>

   and the result is that i can only use words for the arrows. also, i had to place at the top of the slide.

   however, i want to convert it to arrows. and if possible, be something similar to the slide on this site: http://withs2.com/

   Thank you for helping me. I hope to get some answers soon. :)

2. sumolari
   Member
   Posted 8 months ago #

   I'll "translate" the code to a pseudo-code that I think you'll understand better:

   <div class="theme-skinless" style="width:{carousel-size}">
   		{if this carousel is set up to show the arrows then}
   		<div class="arrow-right"><a href="javascript:stepcarousel.stepBy('carousel_{id-of-the-carousel}', -{number-of-slides-to-move-it-is-negative-because-it-goes-back})">{content-of-the-link-can-be-text-or-images}</a></div>
   		<div class="arrow-left"><a href="javascript:stepcarousel.stepBy('carousel_{id-of-the-carousel}', {number-of-slides-to-move})">{content-of-the-link-can-be-text-or-images}</a></div>
   		<div class="clear"></div>
   		{end of the if-block}
   	</div>

   Then, returning to PHP:

   <div class="theme-skinless" style="width:<?php echo $config['CAROUSEL_WIDTH']; ?>">
   		<?php if ($config['ARROWS']): ?>
   		<div class="arrow-right"><a href="javascript:stepcarousel.stepBy('carousel_<?php echo $c_id; ?>', -<?php echo $config['SLIDE_POSTS']; ?>)"><?php /* Here you can add an image */ ?></a></div>
   		<div class="arrow-left"><a href="javascript:stepcarousel.stepBy('carousel_<?php echo $c_id; ?>', <?php echo $config['SLIDE_POSTS']; ?>)"><?php /* Here you can add an image */ ?></a></div>
   		<div class="clear"></div>
   		<?php endif; ?>
   	</div>

   Again, in PHP:

   <div class="theme-skinless" style="width:<?php echo $config['CAROUSEL_WIDTH']; ?>">
   		<?php if ($config['ARROWS']): ?>
   		<div class="arrow-right"><a href="javascript:stepcarousel.stepBy('carousel_<?php echo $c_id; ?>', -<?php echo $config['SLIDE_POSTS']; ?>)"><img src="my_arrow_right.png" /></a></div>
   		<div class="arrow-left"><a href="javascript:stepcarousel.stepBy('carousel_<?php echo $c_id; ?>', <?php echo $config['SLIDE_POSTS']; ?>)"><img src="my_arrow_left.png" /></a></div>
   		<div class="clear"></div>
   		<?php endif; ?>
   	</div>

   Instead of using directly an image, you can use CSS to add a background to the link that allows you to slide the panels. It would be something like this:

   .arrow-right { background:url(right-arrow.png) top left no-repeat; }
   .arrow-right:hover { background:url(right-arrow-hover.png) top left no-repeat; }
   .arrow-left { background:url(left-arrow.png) top left no-repeat; }
   .arrow-left:hover { background:url(left-arrow-hover.png) top left no-repeat; }

   If you need more help, I'll post here more detailed code.

3. soriya
   Member
   Posted 8 months ago #

   this is very helpful and it works perfectly. Thank you so much.

Reply

You must log in to post.