Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!



Photo
- - - - -

Slidshow Nightmare (cross Fade)


  • Please log in to reply
3 replies to this topic

#1 Hans G.

Hans G.

    HR 4

  • Active Members
  • PipPipPipPip
  • 109 posts

Posted 28 July 2009 - 04:04 PM

Hi, I recently applied the code below to my site, to enable a good, non-Flash slideshow. I'm happy with the results, however, I want to add another slide show on the same page. Right now there is one (rotator) located at margin-top:120px and margin-left:-311px of my page but I'd like to have another one (rotator2) located at margin-top:120px and margin-left:300px. How can I accomplish this using the code below?Someone please help!


(slideshow1.css)
----------------

CODE
*
{
     margin: 0;
     padding: 0;
}

#rotator
{
     border: 0;
     cursor: pointer;
     overflow: hidden;
     position:absolute;
     left:50%;
     margin-top:120px;
     margin-left:-311px;
     width: 400px;
     height: 136px;
}

#rotator img
{
     border: 0;
     cursor: pointer;
     width: 400px;
     height: 136px;
}


(slideshow2.css)
----------------

#rotator img
{
     display: none;
     position: absolute;
     top: 0;
     left: 0;
}

(xfade2.js)
------------

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
     if(!d.getElementById || !d.createElement)return;

     css = d.createElement('link');
     css.setAttribute('href','slideshow2.css');
     css.setAttribute('rel','stylesheet');
     css.setAttribute('type','text/css');
     d.getElementsByTagName('head')[0].appendChild(css);
    
     imgs = d.getElementById('rotator').getElementsByTagName('img');
     for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
     imgs[0].style.display = 'block';
     imgs[0].xOpacity = .99;

     setTimeout(so_xfade,8000);
}

function so_xfade()
{
     cOpacity = imgs[current].xOpacity;
     nIndex = imgs[current+1]?current+1:0;
     nOpacity = imgs[nIndex].xOpacity;

     cOpacity-=.05;
     nOpacity+=.05;

     imgs[nIndex].style.display = 'block';
     imgs[current].xOpacity = cOpacity;
     imgs[nIndex].xOpacity = nOpacity;

     setOpacity(imgs[current]);
     setOpacity(imgs[nIndex]);

     if(cOpacity<=0)
     {
         imgs[current].style.display = 'none';
         current = nIndex;
         setTimeout(so_xfade,8000);
     }
     else
     {
         setTimeout(so_xfade,90);
     }

     function setOpacity(obj)
     {
         if(obj.xOpacity>.99)
         {
             obj.xOpacity = .99;
             return;
         }

         obj.style.opacity = obj.xOpacity;
         obj.style.MozOpacity = obj.xOpacity;
         obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
     }
}



(Goes on HTML Page)
---------------------
CODE
<div id="rotator">
<a href="http://www.mywebsite.com/page1.html"><img src="/image1.jpg"</a>
<a href="http://www.mywebsite.com/page2.html"><img src="/image2.jpg"</a>
<a href="http://www.mywebsite.com/page3.html"><img src="/image3.jpg"</a>
</div>


#2 Randy

Randy

    Convert Me!

  • Moderator
  • 17,540 posts

Posted 29 July 2009 - 08:29 AM

You could simply create a #rotator2 id class in your css to reference the 2nd one. You'd also of course need to tweak your js so that it references both the rotator and rotator2 divs.

#3 Hans G.

Hans G.

    HR 4

  • Active Members
  • PipPipPipPip
  • 109 posts

Posted 29 July 2009 - 10:30 AM

Thanks, Randy. Yep, I did that but it didn't work. In the HTML, I added the new div (rotator2). In the css, I added:

#rotator2
{
border: 0;
cursor: pointer;
overflow: hidden;
position:absolute;
left:50%;
margin-top:120px;
margin-left:-311px;
width: 460px;
height: 166px;

In the JS, I added:

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
if(!d.getElementById || !d.createElement)return;

css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);

imgs = d.getElementById('rotator','rotator2').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;

setTimeout(so_xfade,8000);
}

function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,8000);
}
else
{
setTimeout(so_xfade,90);
}

function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}

obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';

#4 Hans G.

Hans G.

    HR 4

  • Active Members
  • PipPipPipPip
  • 109 posts

Posted 29 July 2009 - 03:38 PM

I also created a separate xfade3.js, a separate slideshow1a.css (size/location of new slideshow), a separate slideshow2.css (display/[position), and still no go.

In xfade3.js I indicate:
imgs2 = d.getElementById('rotator2').getElementsByTagName('img2');

and made all the imgs into imgs2 - but still no go. I'm ripping my hair out ova hee-a!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

We are now a read-only forum.
 
No new posts or registrations allowed.