Solved

Remove black pulse in slider transition

Posted on 2013-11-26
14
775 Views
Last Modified: 2013-12-02
When I use this slider transition script it works fine except for a black pulse between each fade transition.

I have attached the js. Can anyone figure out how to remove that pulse and just fade from one picture to another?
bjqs-1.3.js
0
Comment
Question by:BrighteyesDesign
  • 6
  • 4
  • 4
14 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39679106
Link to the page would be more helpful than a bit of js.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 39679108
It really depends on the context. Post your html also.
0
 

Author Comment

by:BrighteyesDesign
ID: 39679292
Yes of course, here it is....


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CC GIRO</title>
<link href="css/cc.css" rel="stylesheet" type="text/css">


<style>	
a img { border:0; }
	code { font-family:Consolas,monospace; }
	.intro { max-width:820px; }

	/* HoverUp boxes */
	.demo {
	float:left;
	background:#000;
	text-decoration:none;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0;
}

	/* Content */
	.demo p { margin:0; }
	.demo img { display:block; /* <- to avoid some whitespace at the bottom of the image */ }

	/* Caption styles */
	.caption { padding:20px; background:#000; color:#ccc; }
	.caption strong { color:#fff; }
	.caption em { font-style:italic; font-family:Georgia,serif; }
	.caption a { color:inherit; }
	.caption a:hover { text-decoration:none; }

	.caption.alpha { background-color:rgb(0,0,0); /* <- fallback */ background-color:rgba(0,0,0,0.8); }
	.caption.icon { padding-left:88px; background-image:url(images/camera.png); background-repeat:no-repeat; background-position:20px 20px; }
	.caption.copyright { padding:5px 10px; background:transparent; text-align:right; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5); }
	.caption.copyright span { padding:2px 8px 4px; background:rgba(0,0,0,0.3); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
	.caption.widescreen { padding:10px 20px; }
	</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="js/bjqs-1.3.min.js"></script>
    
	<script src="js/external/jquery.easing.1.3.js"></script><!-- optional -->
	<script src="js/external/jquery.metadata.js"></script><!-- optional -->
	<script src="js/jquery.hoverup.pack.js"></script>
	<script>
	$(document).ready(function() {

		// We're just calling hoverup here without any options.
		// We're using the Metadata plugin to specify options in the class attribute in the HTML.
		$('.demo').hoverup({
			// You could set options in here too.
		});

	});
	</script>

 <link rel="stylesheet" href="css/bjqs.css">


<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/pilateshaven.css" rel="stylesheet" type="text/css">


<style type="text/css">
.caption1 {padding:20px; background:#000; color:#ccc; }
.caption1 {background-color:rgb(0,0,0); /* <- fallback */ background-color:rgba(0,0,0,0.8); }
.caption1 {padding-left:88px; background-image:url(images/camera.png); background-repeat:no-repeat; background-position:20px 20px; }
.caption1 {padding:5px 10px; background:transparent; text-align:right; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5); }
.caption1 {padding:10px 20px; }
.caption2 {padding:20px; background:#000; color:#ccc; }
.caption2 {background-color:rgb(0,0,0); /* <- fallback */ background-color:rgba(0,0,0,0.8); }
.caption2 {padding-left:88px; background-image:url(images/camera.png); background-repeat:no-repeat; background-position:20px 20px; }
.caption2 {padding:5px 10px; background:transparent; text-align:right; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5); }
.caption2 {padding:10px 20px; }
.caption3 {padding:20px; background:#000; color:#ccc; }
.caption3 {background-color:rgb(0,0,0); /* <- fallback */ background-color:rgba(0,0,0,0.8); }
.caption3 {padding-left:88px; background-image:url(images/camera.png); background-repeat:no-repeat; background-position:20px 20px; }
.caption3 {padding:5px 10px; background:transparent; text-align:right; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5); }
.caption3 {padding:10px 20px; }
.caption4 {padding:20px; background:#000; color:#ccc; }
.caption4 {background-color:rgb(0,0,0); /* <- fallback */ background-color:rgba(0,0,0,0.8); }
.caption4 {padding-left:88px; background-image:url(images/camera.png); background-repeat:no-repeat; background-position:20px 20px; }
.caption4 {padding:5px 10px; background:transparent; text-align:right; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5); }
.caption4 {padding:10px 20px; }
.caption5 {padding:20px; background:#000; color:#ccc; }
.caption5 {background-color:rgb(0,0,0); /* <- fallback */ background-color:rgba(0,0,0,0.8); }
.caption5 {padding-left:88px; background-image:url(images/camera.png); background-repeat:no-repeat; background-position:20px 20px; }
.caption5 {padding:5px 10px; background:transparent; text-align:right; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5); }
.caption5 {padding:10px 20px; }
.homecopy {
	width: 655px;
	margin-top: 10px;
	margin-left: 10px;
	padding-top: 10px;
	padding-left: 10px;
}
h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 30px;
	color: #22A1EB;
	font-weight: normal;
	margin: 0px;
}
a:link {
	color: #22A1EB;
	text-decoration: none;
}
p {
	font-size: 14px;
	line-height: 18px;
}
</style>
</head>

<body>
<div class="holder">
  <div class="header">
    <div class="menunumber">
      <ul id="nav-one" class="dropmenu">
        <li><a href="index.php">HOME</a></li>
        <li><a href="index.php">WEEKLY RIDES</a></li>
        <li><a href="index.php">EVENTS</a></li>
        <li><a href="index.php">JOIN US</a></li>

        <li><a href="index.php">NEWS</a></li>
        <li><a href="index.php">GALLERY</a></li>
      
      </ul>
      <div class="topmenu"><a href="index.php">LINKS</a> /   <a href="index.php">ABOUT US</a> / <a href="index.php">KIT</a> / <a href="index.php">CONTACT US</a></div>
      <div class="social"><a href="https://twitter.com/CCGiro" target="_new"><img src="images/twit.png" alt="facebook twitter" width="42" height="35" class="right15"></a><a href="https://www.facebook.com/pages/CC-Giro/130362050359041" target="_new"><img src="images/fb.jpg" width="97" height="32" alt="facebook twitter"></a></div>
    </div>
    <div class="logo"><div id="banner-fade">
    <!-- start Basic Jquery Slider -->
<ul class="bjqs">


<li><img src="images/Plain.jpg" alt="" title="Nude Musiq"></li>

<li><img src="images/Orange.jpg" alt="" title="Nude Musiq"></li>
      
<li><img src="images/Pink.jpg" alt="" title="Nude Musiq"></li>
       
<li><img src="images/Purple.jpg" alt="" title="Nude Musiq"></li>
         
<li><img src="images/Blue.jpg" alt="" title="Nude Musiq"></li>
     
<li><img src="images/Yellow.jpg" alt="" title="Nude Musiq"></li>
     
     
  </ul>
    <!-- end Basic jQuery Slider -->
</div></div>

  <script class="secret-source">
        jQuery(document).ready(function($) {

          $('#banner-fade').bjqs({
            height      : 116,
            width       :363,
            responsive  : true,
			 animtype      : 'fade',
			usecaptions : false,
			showmarkers     : false,
			showcontrols: false
          });

        });
      </script>
  </div><div id="banner-slide">
    <!-- start Basic Jquery Slider -->
<ul class="bjqs">
      <li><img src="images/home4.jpg" alt="" title="Click here to Join CC Giro, new members are always welcome!"></li>
      <li><img src="images/home2.jpg" alt="" title="Get advice from the many ex pro's riding with us"></li>
      
       <li><img src="images/home3.jpg" alt="" title="We have weekly rides for all levels of rider."></li>
         <li><img src="images/home1.jpg" alt="" title="Check out our Gallery for images of our events and weekly rides."></li>
     
  </ul>
    <!-- end Basic jQuery Slider -->
</div>


<div class="hkv">
  <div class="right"><a class="demo" href="index.php"><img src="images/events.jpg" width="323" height="232" alt="weekly rides">
    <p class="caption alpha"> <strong>Find out about future events</strong><br />
      <em>Midland monster, tours, dinners</em>...</p>
  </a></div>
  <div class="right1"><a class="demo" href="index.php"><img src="images/joinus.jpg" width="323" height="232" alt="weekly rides">
    <p class="caption alpha"> <strong>Join CC Giro</strong><br />
      <em>Click here to find join our team »</em></p>
  </a></div>
  <div class="right1"><a class="demo" href="index.php"><img src="images/wekklyrides.jpg" width="323" height="232" alt="weekly rides">
    <p class="caption alpha"> <strong>Take part in our next ride...</strong><br />
      <em>Click her for information »</em></p>
  </a></div>
</div>
<div class="whitehold">
  <div class="rightcolumn">
    <div class="upcoming">Upcoming events and rides...</div>
    <div class="upcoming2"><span class="righcoltit">Peak District</span><br>
      <strong>Wednesday 13th November </strong><br>
20 miles <br>
<br>
<a href="more.php"><img src="images/more.jpg" width="137" height="26" alt="more"></a></div>
    <div class="upcoming2"><span class="righcoltit">Midland Monster</span><br>
      <strong>Wednesday 21st November </strong><br>
      20 miles <br>
  <br>
  <a href="more.php"><img src="images/more.jpg" width="137" height="26" alt="more"></a></div>
    <div class="upcoming2"><span class="righcoltit">Christmas Dinner</span><br>
      <strong>Friday 15th December</strong><br>
  <br>
  <img src="images/more.jpg" width="137" height="26" alt="more"></div>
  </div>
  <div class="homecopy">
    <h1>Welcome to CC Giro</h1>
    <p>Welcome to our website. We are a cycing club  using  routes mainly in the Lichfield and Derby regions. We aim to run 2 regular rides each wednesday and friday and also take part in many regional, national and worldwide events. </p>
    <p>We are always looking for people to join us so if you're interested please <a href="joinus.php">click here</a> to find out how to go about it. We hope to see you soon!<br>
      <br>
    </p>
    <p><img src="images/strip.jpg" width="655" height="25" alt="strip"></p>
    <div>
      <div class="righthome"><img src="images/peak.jpg" width="407" height="189" alt="peak"><br>
        <br>
      </div>
      <h1>Our next ride...</h1>
      <p><strong>Wednesday 13th November</strong><br>
      </p>
      <p><span class="bluefont">AREA:</span> Peak District<br>
        <span class="bluefont">DISTANCE:</span> 25 miles <br>
        <span class="bluefont">LEVEL:</span> Intermediate </p>
      <p><a href="more.php"><img src="images/more.jpg" width="200" height="39" alt="more"></a><br>
      </p>
    </div>
    <img src="images/strip.jpg" width="655" height="25" alt="strip"> </div>
</div>
<div class="footer">© CC Giro 2013 /  Design: Brighteyes</div>
</div><script class="secret-source">
        jQuery(document).ready(function($) {

          $('#banner-slide').bjqs({
            height      : 411,
            width       : 980,
            responsive  : true,
			 animtype      : 'slide',
			usecaptions : true,
			showmarkers     : false,
			showcontrols: false
          });

        });
      </script>
      
    
</body>
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:mcnute
ID: 39679301
At a first glimps you have two document ready functions.

Put the code blocks in just one document ready function and see if it gets any better.

Even open the console and see if any js errors popup. Then post them here again.

The console is under F12 in IE.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39679323
Can you remove one of the sliders and see if still occurs
Either
$('#banner-fade').bjqs({ ...
or
$('#banner-slide').bjqs({...

p.s. you could have dozens of document ready blocks - it wouldn't make any difference.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 39679360
don't forget to check the console! javascript errors are bad and are the best indication where to debug. Programmers essentials!
0
 

Author Comment

by:BrighteyesDesign
ID: 39679375
I should have done this first!

I just stripped down the code to just this and it still happens.

It does appear that rather than fading to black the transitions opacity actually goes transparent (100% - 0% then 0% - 100%). What colour is in the background (black in my case) then show through.




<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CC GIRO</title>





<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="js/bjqs-1.3.min.js"></script>
    
	
 <link rel="stylesheet" href="css/bjqs.css">





</head>

<body>
    <div class="logo"><div id="banner-fade">
    <!-- start Basic Jquery Slider -->
<ul class="bjqs">


<li><img src="images/Plain.jpg" alt="" title="Nude Musiq"></li>

<li><img src="images/Orange.jpg" alt="" title="Nude Musiq"></li>

     
     
  </ul>
    <!-- end Basic jQuery Slider -->
</div></div>

  <script class="secret-source">
        jQuery(document).ready(function($) {

          $('#banner-fade').bjqs({
            height      : 116,
            width       :363,
            responsive  : true,
			 animtype      : 'fade',
			usecaptions : false,
			showmarkers     : false,
			showcontrols: false
          });

        });
      </script>
</body>
</html>

Open in new window

0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 58

Expert Comment

by:Gary
ID: 39679403
Not seeing any pulse
http://jsfiddle.net/eNgLN/

Can you upload your code so I can see it in play on your server.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 39679415
I'm glad you figured it out. farewell!
0
 

Author Comment

by:BrighteyesDesign
ID: 39679428
I haven't yet! I meant I should have cut the code down earlier rather than posting my whole page.

Here's a live version  http://95.128.128.74/~nudemusi/testjs.html
0
 
LVL 58

Expert Comment

by:Gary
ID: 39679467
I don't see a problem with it, that's how it works - fade the img out while fading in the next.
Probably just looks weirder because the image is mainly black
0
 

Author Comment

by:BrighteyesDesign
ID: 39679490
It just need to be subtler. The whole point of the logo transition is that only that one letter changes.
The full version scrolls through about 8 different images so is flickering away all the time.

One image need to overlay the other rather than fade in out out.

Probably easier to just find another script altogether, I know there's plenty out there. I just thought it would be easy(ish) to adjust this script.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39679493
Try increasing the animduration (or add it as you're not using it currently)
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39679515
Try
animduration:2000,
animspeed :4000


http://jsfiddle.net/GaryC123/eNgLN/1/
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now