Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 388
  • Last Modified:

JQuery Help

I am using a jquery slide show and I want to have all the images show up at a specific width (450px) rather than their actual width as it currently happens.  I have contacted the author but no response(yet).  I have tried to manage it using some inline styles and the internal styles, as well as fiddling around with the .js sheet, all to no avail.  I am just wondering if someone smarter than me (and there are lots of them on this site :) ) would help with this.  Here is the slide show I am using:

http://workshop.rs/projects/coin-slider/

Here is my <head> stuff:



<!--<script type="text/javascript" src="jquery-1.4.2.js"></script>-->
<script type="text/javascript" src="/home/coin-slider/coin-slider.js"></script>
<link rel="stylesheet" href="/home/coin-slider/coin-slider-styles.css" type="text/css" />

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 450, navigation: false, delay: 3000 });
    });
</script>

Here is my div:

                                          <div id="coin-slider">
                                              <a href="<%=Slides(0)%>" target="_blank"><img src="<%=Slides(0)%>" style="width:450px;"></a>
                                              ......
                                              ......
                                              <%For i = 1 To UBound(Slides) - 1%>
                                                      <a href="<%=Slides(i)%>" target="_blank"><img src="<%=Slides(i)%>" style="width:450px;"></a>
                                                <%Next%>
                                          </div>

Again, it really works well...I really like it...just need this last little adjustment
0
Bob Schneider
Asked:
Bob Schneider
1 Solution
 
hieloCommented:
On the demo page you provided, they have the following setup:
	<div id="gamesHolder">
		<div id="games">
		
			<a href="http://www.minininjas.com/" target="_blank">
				<img src="games/mini_ninjas.jpg" alt="Mini Ninjas" />
				<span>
					<b>Mini Ninjas</b><br />
					Your quest to defeat the Evil Samurai Warlord has begun. Control the powers of nature, possess creatures, use your
					furious Ninja skills to free your Ninja friends.
				</span>
			</a>
			
			<a href="http://www.princeofpersiagame.com/" target="_blank">
				<img src="games/prince_of_persia.jpg" alt="Price of Persia" />
			</a>
			
			<a href="http://spidermandimensions.marvel.com/" target="_blank">
				<img src="games/spiderman_shattered_dimensions.jpg" alt="Spiderman: Shattered Dimensions" />
			</a>
			
			<a href="http://brinkthegame.com/" target="_blank">
				<img src="games/brink.jpg" alt="Brink" />
			</a>
		
			<a href="http://www.godofwar.com/" target="_blank" >
				<img src="games/god_of_war_3.jpg" alt="God of War III" />
			</a>
			
			<a href="http://www.borderlandsthegame.com/" target="_blank">
				<img src="games/borderlands.jpg" alt="Borderlands" />
				<span>
					<b>Borderlands</b><br />
					Fun combat and a steady flow of rewards make this journey a massively enjoyable one, especially with some fellow mercenaries along for the ride.
				</span>
			</a>
			
			<a href="http://www.swtor.com/" target="_blank">
				<img src="games/star_wars_the_old_republic.jpg" alt="Star Wars: The Old Republic" />
			</a>
				
			<a href="http://www.batmanarkhamasylum.com/" target="_blank">
				<img src="games/batman_arkham_asylum.jpg" alt="Batman: Arkham Asylum" />
			</a>
			
		</div>
	</div>

<script>$(document).ready(function() {
	$('#games').coinslider({ hoverPause: false });
});
</script>

Open in new window

By default, the width they are using is 565px.  If you try to execute:
      $('#games').coinslider({ width:1000, hoverPause: false });
it will not work.   The reason for this is that in their setup <div id="gamesHolder"> has a width of 565px. So the inner <div id="games"> is constrained to a maximum width of 565px.  To solve the problem you would need to increase the width of <div id="gamesHolder"> first (which you can do via CSS at the <head> of your page.)

Notice however, that if you wanted a width smaller than the container then it would work:
      $('#games').coinslider({ width:100, hoverPause: false });

In your case <div id="coin-slider"> is equivalent to <div id="games">, which means you need a "wrapper" equivalent to <div id="gamesHolder"> .  I suggest:
<head>
...
<style type="text/css">
#coin-sliderHolder{width:450px;}
</style>
...
</head>
<body>
...
<div id="coin-sliderHolder" >
                            <div id="coin-slider">
                                              <a href="<%=Slides(0)%>" target="_blank"><img src="<%=Slides(0)%>"></a>
                                              ......
                                              ......
                                              <%For i = 1 To UBound(Slides) - 1%>
                                                      <a href="<%=Slides(i)%>" target="_blank"><img src="<%=Slides(i)%>"></a>
                                                <%Next%>
                             </div>
</div>

Open in new window

0
 
Bob SchneiderCo-OwnerAuthor Commented:
Wow!  Incredibly helpful...
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now