Simple Text Slider QUICK HELP

JavaScript
1

Hello guys, i need a little help here.
I’m totally inexperienced in Jquery and CSS but i’m usually a fast learner

I downloaded the CODASLIDER () and transformed it:

But I need it to stay that way, and i don’t know how to do:

Someone can help me?
I already tried change CSS but i don’t know how change Arrows and etc…

I’ll need to put the Jquery here on my site, I made a simulation by fireworks:

Additionally, I leave here the link to download the coda slider modified if you want to take a look
Thank you!

2

Hi there,

When I look at the index file in the .rar archive you posted, I see something that looks like screenshot two (where you say you’ve transformed it).
So what exactly is your problem?
Are you trying to style this to look like screenshot 3 (where you have the red navigation)?

3

Yes pullo, i need transform screenshot 2 in screenshot 3 style but that was so hard and i found this example: http://www.sitepoint.com/forums/showthread.php?972367-CSS-with-Jquery-Style-Don-t-Work

Maybe that can be more easily to style, what you think?

In this case i just need change style from next and preview buttons and that will work perfectly

Thanks bro!

4

The navigation arrow styles can be found in the coda-slider.css stylesheet, as of line 107.
The HTML is inserted in the jquery.coda-slider-3.0.min.js.
Search the file using a text editor for:

<div class="coda-nav-left-arrow" data-dir="prev" title="Slide left"><a href="#"></a></div>

as well as:

<div class="coda-nav-right-arrow" data-dir="next" title="Slide right"><a href="#"></a></div>

It will be easier for you to use the non-compressed version, however.

If you open this file and scroll to the bottom, all of the options are listed there.

5

Thanks pullo, i done the job but i can’t put in my opencart store
Slider: http://upgradeloja.genesiseries.com/depoimentos/index.html

I need incorporate this code:

STYLE

	<style type="text/css" media="screen">
		.slides_container {
			width:244px;
			display:none;
		}

		.slides_container div {
			width:244px;
			height:230px;
			display:block;
		}


		.pagination {
			list-style:none;
			margin:0;
			padding:0;
			display:none;
		}
	</style>

SCRIPTS

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>

	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				generateNextPrev: true
			});
		});
	</script>

Divs:

	<div id="slides">
		<div class="slides_container">
			<div>
				<p><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p>
			</div>
			<div>
				<p><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p>
			</div>
			<div>
				<p><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p>
			</div>
			<div>
				<p><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p>
			</div>
		</div>
	</div>

But when i put all this in depoiment space just don’t work
The facebook fanbox work perfectly

Facebook Script

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Probably you don’t know how opencart modules and themes work, but:

This are the footer.tpl

<div id="custom-footer">
<div class="set-size">
	
		<?php if ($this->config->get('about_us_status') == '1') : ?>
		
		<div class="grid-<?php echo 12 / $custom_footer_active_columns; ?> float-left">
			
			<h2><?php echo $this->config->get('about_us_header'); ?></h2>
			
			<p>
			
				<?php echo html_entity_decode($this->config->get('about_us_text')); ?>
				
			</p>
		
		</div>
		
		<?php endif; ?>

That is the most important, admin/view/template/module/universal.tpl

		<!-- ABOUT US -/////////////////////////// -->
		
		<!-- Title Footer -->
		
		<div class="title-footer">
			<div>
				
				<h3>About us</h3>
				<?php $selected_disabled = false; $selected_enabled = false; if($about_us_status == 0) { $selected_disabled = ' selected="selected"'; } if($about_us_status == 1) { $selected_enabled = ' selected="selected"'; } ?>
				<select name="about_us_status" style="width:272px"><option value="0"<?php echo $selected_disabled; ?>>Disabled</option><option value="1"<?php echo $selected_enabled; ?>>Enabled</option></select>
				
			</div>
		</div>
		
		<div class="left" style="width:450px">
		
				<!-- Input -->
				<div>
				
					<p>Header text</p>
					<div class="input"><input type="text" value="<?php echo $about_us_header; ?>" id="about_us_header" name="about_us_header" style="width:251px;padding:2px 10px" /></div>
				
				</div>
				<!-- End Input -->
				<!-- Input -->
				<div>
				
					<p>About text</p>
					<div class="input"><textarea name="about_us_text" rows="10" cols="50" style="width:263px;height:250px;padding-top:10px"> <?php echo $about_us_text; ?></textarea></div>
				
				</div>
				<!-- End Input -->
		
		</div>
		
		<!-- END ABOUT US ?///////////////////////////////////// -->

Is there no way to mount the slider on another corner and pull only one table with the slider into the module with a simple command?
Thanks!

6

Well done. Looking good!

Is there no way to mount the slider on another corner and pull only one table with the slider into the module with a simple command?

Probably. Can you post a link where I can see what you are talking about?

7

I was thinking about create some table or frame in a simple page and call all that inside this table, have a command to do this? like a <?php echo
How as said i tried put the style, script and divs where i want my slider but anything this worked, nothing appears, it’s like if space were completely empty.

I’m using opencart in my store, i don’t know if this information helps but opencart uses MVC structure
http://opencart-help.com/general/18-how-is-the-opencart-framework-structured.html
e s
I already have a slider in Jquery (from my theme) and i know, i can put where i want my slider i just don’t know do it.

Thanks for all bro, any idea?

8

Hi there,

The MVC pattern will itself not affect where you can place elements on a page.
However, I’m not familiar with the opencart framework, so I’m not sure of how many other factors are in play that can influence your page’s layout.

Can you post a link where I can see what you are talking about?

9

Bro, so… i discovered what was my problem.
I was trying call <script src=“js/slides.min.jquery.js”></script> and the correct was <script src=“depoimentos/js/slides.min.jquery.js”></script>

Now you can see all working there: http://upgradeloja.genesiseries.com

But now i was thinking about to how improve my slider, as i will use my slider to show opinions from my clients i will need update them with a high frequently
A good solution i found are create a SQL database and call with <? php echo.

Take a look:

There we will have 1 div, and two <p> ok?
As you can see, first <p> are the opinion, where my client will can say anything.
The second <p> display the name of my client and city - state


<div>
				<p class="depoimento"><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p><p class="cliente"><font color="#99CB1E">Paulo Henrique, São Paulo - SP</font></p>
</div>

I was wondering and this can be (where depo = opinion):


<div>
				<p class="depoimento"><font color="#bdbdbd"><?php echo ('depo')?></font></p><p class="client"><font color="#99CB1E"><?php echo ('client')?></font></p>
</div>

But we have a problem here.
Using this method i also will need define every ‘depo’ and every ‘client’ and i will need put $depo1, $client1, $depo2, $client2 etc…
And i need to pull from database, how to do?

If i create my DB with 2 spaces, one called DEPO and other called client, we can use php to pull the text from DB
But i need to RANDOM it.

That will be like this:


<p class="depoimento">PHP SELECT A RANDOM CLIENT OPINION AND PULL</p><p class="cliente">PHP PULL NAME OF CLIENT OPINION</p>

That can work?

Thanks!

10

If you want to output a list of your clients and options just use some kind of loop.

<?php 
  $clients = array( array("rose", 1), array( "daisy", 2), array( "pete", 3));
  for ($i= 0, $size = count($clients); $i< $size; $i++){
    echo("<p class=\\"depoimento\\">$clients[i][1]</p><p class=\\"cliente\\">$clients[i][0]</p>");
  } 
?>
11

Sorry but i don’t know how to use this code and what means rosa, daisy and pete?

Will be easily use with mysql database, that way i will can include opinions quickly

I was searching about how to randomize a text in mysql and this can be like:

SELECT * FROM sometable WHERE 1 ORDER BY RAND() LIMIT 1;

after random i just need print the text: <p class=“depoimento”>PRINT HERE</p>
I just don’t know how to do, some idea?

12

Sorry to confuse you. This was just an example of how you would iterate over an array of clients pulled from the database.

Presuming you have the results stored in some kind of array, I would just iterate over that using [for or [URL="http://php.net/manual/en/control-structures.foreach.php"]foreach](http://www.php.net/manual/en/control-structures.for.php), as per my previous example.

Hope that helps.