slideshow fade out/fade in

[kpk1l]

thanks for understanding me
i activate the second slider,
if you could do something with this, I would greatly appreciate
if not, tell me what to do
you can choose between slide or fade effect. or one of them , or both. which would look better

i let the same class for slider2 as for slider1, because if i use a copy of .slider i see only first post of it over first slider
(sorry for my english )

[kpk1l]

jscheuer1, it's possible to do something in ucoz system , or not ..because that modules?

[jscheuer1]

I'm not sure. If we can find where the slider is initialized, we can probably make a second independent one on the page. Or I can study the structure of the generated HTML of the slider. If it lends itself to substitution, we can create two unseen mirrors of that part of it that contains the content. One of these mirrors would be identical, the other we could populate with the content for the second slider and switch those mirrors in and out of the visible slider. If all else fails we should be able to use a different slider and make two of those. In order to figure all that out I will need some time. I have some, but it might require more than I have at the moment. I will get back to you when I have an answer.

[kpk1l]

can i help you somehow? you need the structure of page with codes or.. i don't know...

[kpk1l]

code from css:

/* tooltip */

#easyTooltip {
 padding:4px;
 border: 1px solid #c7c7c7;
 /*background:#f1f1f1;*/
 background: #ffffff;
 border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 color: #666666;
 filter:alpha(opacity=90);
 -moz-opacity: 0.9;
 -khtml-opacity: 0.9;
 opacity: 0.9;
}



.slider {position: absolute;top: 4px; left:4px;width: 980px;} 
.slider-item {}
.slider-item-small {width: 355px;height: 73px;background: #2d5a86;overflow: hidden;position: absolute;right: 0;} 
.slider-item-small a {display: block;padding: 5px 10px 5px 5px;color: #b1b1b1;text-decoration: none;}
.slider-item-small img {height: 61px;border: 1px #404040 solid;float: left;margin: 0 10px 0 0;}
.slider-item-small a:hover {} 
.slider-item-big {display: none;position: absolute;left: 12px;top: 12px;width: 607px;height: 298px;overflow: hidden;} 
.slider-item-big img {border: 1px solid #2d5a86;} 
.slider-item-big h2 {background: url(../images/transparent-bg.png);position: absolute;bottom: 3px;left: 0px;width: 587px;padding: 12px 10px 12px 10px;color: #fff;line-height: 17px;font-size: 11px;} 
.slider-item-big h2 a {color: #fff;} 
.slider-item-big-link {background: url(http://animationddd.ucoz.net/images/slider-item-big-link.png) left top no-repeat;display: block;
width: 135px;height: 32px;text-decoration: none;line-height: 32px;color: #2f2f2f;text-align: center;position: absolute;left: 465px;font-weight: bold;}

.slider-item-big-link:hover {background: url(http://animationddd.ucoz.net/images/slider-item-big-link.png) left bottom no-repeat;color: #fff;} 
.slider-item-active .slider-item-small {background: #2a5379;}
.slider-item-active .slider-item-small img {border: 1px #fbf6e2 solid;}

and the code from informer: (about informers http://forum.ucoz.com/forum/37-457-1)

<!-- Slider item -->
 <div class="slider-item">
 <div class="slider-item-small">
 <a href="$ENTRY_URL$">
 <img src="$IMG_URL1$" width="91" height="61" alt="$TITLE$" />
<br><div align="center"><font size="3">$TITLE$</font></div> 
 </a>
 </div>
 <div class="slider-item-big">
 <img src="$IMG_URL1$" width="607" height="294" alt="$TITLE$" />
 <h2>$TITLE$</h2>

 </div>
 </div>

the code take image (IMG_URL) from last 4 entries from module File Catalog
structure of informer:
[File Catalog · Entries · Entry date D · Entries: 4 · Columns: 1 · Title length: 90 ]


and this is the code form top part of the website:

<div class="cm-bg">
 <div class="slider">$MYINF_1$</div>
</div>

$MYINF_1$ is the code of informer

the second informer code (for slider 2 from another module) is $MYINF_17$

[jscheuer1]

No, none of that really helps. I've seen all of that already more or less either directly or from the code it produces. What I'm looking for is javascript something like so:

$(.'slider).slide(maybe some stuff here)

The $ might be jQuery or some other variable representing jQuery instead, the .slide is probably .somethingelse, and even the ('.slider') might be expressed as a variable, so it could be very hard to find. In fact it is very hard to find because I'm good at finding stuff like that and I can't find it. At least not yet and I've looked everywhere I can think of for it. I'm like 99% sure it's there somewhere in some form because the slider appears to use jQuery. But I have another idea where we don't need to find it - to put a second slider up there that doesn't get run because it's not inside a class="slider" div, and is not seen because we make it not seen. We can then take its contents and swap it in and out of the working slider. As long as all of the dimensions as well as the number of items are the same as the working slider (they were when I looked at it before), it should be fine.

But I see you took down the second slider. What might help me is if you put it back up, but make it slightly different, it was:

<div class="slider"><!-- Slider item -->  <div class="slider-item">  <div class="slider-item-small">  <a href="/publ/genre/adventure/hotel_transylvania_2012/5-1-0-30">  <img src="http://animationddd.ucoz.net/_pu/0/80058646.png" width="91" height="61" alt="Hotel Transylvania (2012)" /> <br><div align="center"><font size="3">Hotel Transylvania (2012)</font></div>   </a>  </div>  <div class="slider-item-big">  <img src="http://animationddd.ucoz.net/_pu/0/80058646.png" width="607" height="294" alt="Hotel Transylvania (2012)" />  <h2>Hotel Transylvania (2012)</h2>   </div>  </div><!-- Slider item -->  <div class="slider-item">  <div class="slider-item-small">  <a href="/publ/genre/action/brave_2012/3-1-0-29">  <img src="http://animationddd.ucoz.net/_pu/0/49804586.jpg" width="91" height="61" alt="Brave (2012)" /> <br><div align="center"><font size="3">Brave (2012)</font></div>   </a>  </div>  <div class="slider-item-big">  <img src="http://animationddd.ucoz.net/_pu/0/49804586.jpg" width="607" height="294" alt="Brave (2012)" />  <h2>Brave (2012)</h2>   </div>  </div><!-- Slider item -->  <div class="slider-item">  <div class="slider-item-small">  <a href="/publ/genre/short_film/day_night_2010/2-1-0-28">  <img src="http://animationddd.ucoz.net/_pu/0/46489362.png" width="91" height="61" alt="Day & Night (2010)" /> <br><div align="center"><font size="3">Day & Night (2010)</font></div>   </a>  </div>  <div class="slider-item-big">  <img src="http://animationddd.ucoz.net/_pu/0/46489362.png" width="607" height="294" alt="Day & Night (2010)" />  <h2>Day & Night (2010)</h2>   </div>  </div><!-- Slider item -->  <div class="slider-item">  <div class="slider-item-small">  <a href="/publ/genre/comedy/partly_cloudy_2009/4-1-0-27">  <img src="http://animationddd.ucoz.net/_pu/0/02610359.png" width="91" height="61" alt="Partly Cloudy (2009)" /> <br><div align="center"><font size="3">Partly Cloudy (2009)</font></div>   </a>  </div>  <div class="slider-item-big">  <img src="http://animationddd.ucoz.net/_pu/0/02610359.png" width="607" height="294" alt="Partly Cloudy (2009)" />  <h2>Partly Cloudy (2009)</h2>   </div>  </div></div>

At least that's the HTML code that was generated for it. Bring that back, but make the beginning like so (additions/changes highlighted):

<div class="slider2" style="position:absolute; visibility:hidden;">><!-- Slider item -->  <div class="slider-item">  <div class="slider-item-small">  <a href="/publ/genre/adventure/hotel_transylvania_2012/5-1-0-30">  <img src="http://animationddd.ucoz.net/_pu/0/80058646.png" width="91" height="61" alt="Hotel Transylvania (2012)" /> <br><div ali . . .

And then I can try working with it. Ordinarily I would create a mock up on my local server. But I've tried that already and it won't load. There are one or more things on that page that apparently require it to be on the server that it is on.

But, if you can put that markup back with the slight change I'm asking for, I should be able to manipulate it via javascript from the console. If I can get it to do what we want from there, I can translate that into an on page script. That's how I did it the first time.

[kpk1l]

slider2 was a copy of .slider class (class post above)


if this don't work...can you give another slideshow to use with that informer. instead of my actual slideshow

[jscheuer1]

No. It wasn't a copy, it had different images and text inside of it, and it wasn't calss="slider2" it was class="slider". I'm asking you to bring it back with class="slider2" and the added style I mentioned. Can you do that? If you do, it shouldn't be visible at all, and the current class="slider" should work just as it has been. What it will do if that happens is give me something to work with to help you. If you cannot do it, then I don't think there's anything I can do for you. Except I think that even if you can only do what you had before and can add some javascript right after the second class="slider" we might still be able to make that work.

With the way it is now though, there's nothing I can do with it. Well, that's not true I can inject the HTML code and see if I can work with it from there. But that won't be of much use to you if you cannot generate it. The best way to do so would be how I just asked. If you can only do it the way you did it before though, you can put this script right after it:

<script type="text/javascript">
jQuery('.slider').eq(1).removeClass('slider').addClass('slider2').css({position: 'absolute', visibility: 'hidden'});
</script>

That should give me enough to work with.

[kpk1l]

I bring it back with class="slider2" and style before you answer. And now I put the script right after it.

[jscheuer1]

Since you put in the class="slider2" and the style, you don't need the script. But it's not hurting anything.

I can work with that. I should know by tomorrow if there's anything that can be done with it.

At least it doesn't look bad for now - Gives me time to work on it.