fadeimage effect

JolinM / 2011-04-25 22:19:57   

Hi,

I'm triyng to reproduce the fade image effect seen here -> http://www.hyperkit.co.uk/content/editorial

So far,I have the script in the header and I've put the two javascript file in my theme folder.

  1. <script type="text/javascript" src="/jquery/jquery-1.2.6.min.js"></script>
  2. <script type="text/javascript" src="/jquery/cycle.all.pack.v2.28.js"></script>


$('.chapter').hide();
$('.whitebox').hide();
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
timeout: 0
});
});

$(window).load(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 2000,
timeout: 2000
});
});



I've found the code to apply on the image (where can I put it in indexhibit?)

  1. <div class="fadeimage" style="width: 625px; height: 416px; background-color: #19d147;">
  2. <img src="/1pix_projects.gif" alt="" width="625" height="416" />
  3. <img src="/files/gimgs/6_photo3.jpg" width="625" height="416" alt="" title="" />
  4. </div>

Here is my own site -> http://www.jolinmasson.com

JolinM / 2011-04-25 22:21:31   

Oups, it seems that we cannot delete a post (or I don't know how!)

The complete javascript code is this one ->


$('.chapter').hide();
$('.whitebox').hide();
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
timeout: 0
});
});

$(window).load(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 2000,
timeout: 2000
});
});



JolinM / 2011-04-25 22:22:39   

Dammit, I don't know how to fit it all!
Here is a code to the text file of the code…

midge218 / 2011-06-19 19:45:29   

wow this seems to be a wicked effect, checked your site and doesnt look like youve managed it? we can work on this together if you like? im not great at coding but i want it enough lol

blameme / 2011-06-20 03:08:37   

Hello, you example site is running the following piece of script:

  1. < script type="text/javascript">
  2. $(document).ready(function() {
  3.     $('.fadeimage').cycle({ 
  4.     fx: 'fade', 
  5.     timeout: 0
  6.  });
  7. });
  8. $(window).load(function() {
  9.     $('.fadeimage').cycle({ 
  10.     fx: 'fade', 
  11.     speed: 1500,
  12.     delay: -3500,
  13.     autostop: 1
  14.  });
  15. });
  16. < /script>

which I can´t see in the < head> of your document, maybe start with that.

midge218 / 2011-06-20 08:17:56   

doesnt seem to work

This thread has been closed, thank you.