Advanced Search

Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 40

Thread: slideshow fade out/fade in

  1. #11
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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 )
    Last edited by kpk1l; 02-15-2013 at 09:05 PM.

  2. #12
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #14
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  5. #15
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    code from css:
    Code:
    /* 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)
    Code:
    <!-- 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:
    Code:
    <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$
    Last edited by kpk1l; 02-17-2013 at 03:05 PM.

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    $(.'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:

    Code:
    <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):

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #17
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by kpk1l; 02-17-2013 at 07:04 PM.

  8. #18
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #19
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  10. #20
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Ultimate Fade-in Slideshow -- Fade Duration and Pause
    By ellenjones6 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-21-2014, 04:18 PM
  2. Ultimate Fade-in slideshow - STOP FADE IN ON FIRST IMAGE
    By trillodigital in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-10-2011, 12:18 PM
  3. Replies: 3
    Last Post: 07-12-2010, 04:04 PM
  4. Ultimate Fade in Slideshow - how to require FIRST image to fade in?
    By charmedworks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-17-2008, 07:12 PM
  5. Change fade time in Ultimate Fade In slideshow
    By Zaphodz in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-17-2006, 12:08 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •