Item-Slideshow Plugin

[diego_tucholga]

Hi,
I spend a lot of time to make a item-slideshow, but it don´t work. I think there are two mistakes: There are php-variables in a php-code, for example the patch to the javascript file is a php variable in a php code. That´s wrong, but I don´t know a solution. The second is, that if I use the variable <?php if( osc_count_item_resources() ) { ?> for the slideshow on the startpage, I can not have normal articels on the start-page (main.php) without slideshow,´cause there will repeat the previous and next button-image, I don´t know why.
This code will show you. I use a browser-detect script, ´cause the slideshow will not supported by IE7!

Code: [Select]

<?php
$useragent = $_SERVER['HTTP_USER_AGENT']; 
if (preg_match('|MSIE ([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'IE';
} elseif (preg_match('|Opera/([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Opera';
} elseif(preg_match('|Firefox/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Firefox';
} elseif(preg_match('|Safari/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Safari';
} elseif(preg_match('|Chrome/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Chrome'; 
}   else {
        // Browser nicht erkannt!
    $browser_version = 0;
    $browser= 'anderer';
}

if ($browser == "IE" AND $browser_version < "8.0") {
echo '<font style="color:red;">Sie benutzen den Internet Explorer 7. Bitte aktualisieren Sie Ihren Browser um eine dynamische Artikelübersicht einzusehen.</font>';
}
else {
echo '
<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url("jquery_1_3_2.js") ; ?>"></script>
<script type="text/javascript">
  $(document).ready(function() {

        $("#carousel_ul li:first").before($("#carousel_ul li:last"));     
        $("#right_scroll img").click(function(){
       
            var item_width = $("#carousel_ul li").outerWidth() + 0;
           
            var left_indent = parseInt($("#carousel_ul").css("left")) - item_width;
           
            $("#carousel_ul:not(:animated)").animate({"left" : left_indent},500,function(){   
               
                $("#carousel_ul li:last").after($("#carousel_ul li:first"));
               

                $("#carousel_ul").css({"left" : "-122px"});
            });
        });
       

        $("#left_scroll img").click(function(){
           
            var item_width = $("#carousel_ul li").outerWidth() + 0;
           

            var left_indent = parseInt($("#carousel_ul").css("left")) + item_width;
           
            $("#carousel_ul:not(:animated)").animate({"left" : left_indent},500,function(){   
           
         
            $("#carousel_ul li:first").before($("#carousel_ul li:last"));

            $("#carousel_ul").css({"left" : "-122px"});
            });
           
           
        });
  });
</script>
<?php while ( osc_has_latest_items() ) { ?>
<div id="carousel_container">
<div id="carousel_inner">
<ul id="carousel_ul">
<?php if( osc_count_item_resources() ) { ?>
<li><a href="<?php echo osc_item_url() ; ?>"><?php echo osc_item_title() ; ?></a><div class="noblock_slider"><a href="<?php echo osc_item_url() ; ?>"><img src="<?php echo osc_resource_thumbnail_url() ; ?>" width="94" height="94" alt="" /></a></div></li>
<?php } else { ?>
<?php } ?>
</ul>
</div>
<div style="width:488px;">
<div id="left_scroll"><img src="/images/prevArrow.png" /></div>
<div id="right_scroll"><img src="/images/nextArrow.png" /></div>
</div>
</div>
<?php } ?>
';
}
?>
Maybe, somebody can help me.
Thanks alot.

[Juan Ramón]

Can you copy the whole file?

Your problem is that the slideshow is showed correctly but then the last items list is not appearing?

[diego_tucholga]

Hi and thanks for reply,

that´s the whole code. I´ve did just only a style with css to that.
The code looks like that:

Code: [Select]

#carousel_inner {
float:left; /* important für inline Positionierung */
width:488px; /* important (die width = width vom Artikel(incl. margin) */
overflow: hidden;  /* important (Lässt nichts außerhalb dem Div) */
background:none;}

#carousel_ul {
position:relative;
left:-122px;/* important (Dies sollte die Minuszahl eines Artikels incl. Margin sein)*/
list-style-type: none;
margin: 0px;
padding: 0px;
width:9999px; /* important */}

#carousel_ul li{
float:left;                                 
width:110px;
height:142px;
padding:4px;
background:url(../images/slider_box_bg.png) repeat-x;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-khtml-border-radius:5px;
margin-right:4px;}

#carousel_ul li a:link, #carousel_ul li a:visited,#carousel_ul li a:hover, #carousel_ul li a:active{
color:#313131;
text-decoration:none;
display:block;
font-size:11px;
max-height:45px;
overflow:hidden;}

#carousel_ul li .noblock_slider a:link, #carousel_ul li .noblock_slider a:visited, #carousel_ul li .noblock_slider a:hover, #carousel_ul li .noblock_slider a:active{
color:#313131;
text-decoration:none;
max-height:94px !important;
border:none;}

#carousel_ul li img {
border:none;
display:block;
margin-right:auto;
margin-left:auto;
cursor:pointer;}

#left_scroll, #right_scroll{
float:left;
height:40px;
width:40px;}

#left_scroll img, #right_scroll img{
cursor: pointer;
cursor: hand;}

I know that the slideshow work, but the next and prev button will repeat every item. In addition, that the variables in the php code will not replaced. I know it´s false to make variables into another php code, but I don´t know another solution, do you know one?
Thanks alot.

[diego_tucholga]

Can please somebody help me? The Slideshow don´t work!

[_CONEJO]

Hi, I could not understand you, with your variables problem, sorry.

Could you explain a little longer?

Also, does the jquery exists? Because I don't have it under that name on modern theme.
What do you mean "it does not work"? What do you mean with this "I know it´s false to make variables into another php code" ?



Thanks

[diego_tucholga]

Thanks for the feedback!

So, the item-slideshow is independent of any design.
I made a browser-detect script, ´cause IE7 doesn´t understand my slideshow!
So there are two problems, the first is, that you can not use a php variable like the osc_current_web_theme_js_url in the browser-detect script, the variables will not replaced. So I must change this:

Code: [Select]

<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url("jquery_1_3_2.js") ; ?>"></script>
into (like) this:

Code: [Select]

<script type="text/javascript" src="echo osc_current_web_theme_js_url("jquery_1_3_2.js") ;"></script>
But that also don´t work.
The second problem is, that the prev and next button-images will repeat in every item, thats false. So I want to finish this, but I can not do it alone, I need your help!
This is the whole code:

Code: [Select]

<?php
$useragent = $_SERVER['HTTP_USER_AGENT']; 
if (preg_match('|MSIE ([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'IE';
} elseif (preg_match('|Opera/([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Opera';
} elseif(preg_match('|Firefox/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Firefox';
} elseif(preg_match('|Safari/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Safari';
} elseif(preg_match('|Chrome/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Chrome'; 
}   else {
        // Browser nicht erkannt!
    $browser_version = 0;
    $browser= 'anderer';
}

if ($browser == "IE" AND $browser_version < "8.0") {
echo '<font style="color:red;">Sie benutzen den Internet Explorer 7. Bitte aktualisieren Sie Ihren Browser um eine dynamische Artikelübersicht einzusehen.</font>';
}
else {
echo 
<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url("jquery_1_3_2.js") ; ?>"></script>
<script type="text/javascript">
  $(document).ready(function() {

        $("#carousel_ul li:first").before($("#carousel_ul li:last"));     
        $("#right_scroll img").click(function(){
       
            var item_width = $("#carousel_ul li").outerWidth() + 0;
           
            var left_indent = parseInt($("#carousel_ul").css("left")) - item_width;
           
            $("#carousel_ul:not(:animated)").animate({"left" : left_indent},500,function(){   
               
                $("#carousel_ul li:last").after($("#carousel_ul li:first"));
               

                $("#carousel_ul").css({"left" : "-122px"});
            });
        });
       

        $("#left_scroll img").click(function(){
           
            var item_width = $("#carousel_ul li").outerWidth() + 0;
           

            var left_indent = parseInt($("#carousel_ul").css("left")) + item_width;
           
            $("#carousel_ul:not(:animated)").animate({"left" : left_indent},500,function(){   
           
         
            $("#carousel_ul li:first").before($("#carousel_ul li:last"));

            $("#carousel_ul").css({"left" : "-122px"});
            });
           
           
        });
  });
</script>
<?php while ( osc_has_latest_items() ) { ?>
<div id="carousel_container">
<div id="carousel_inner">
<ul id="carousel_ul">
<?php if( osc_count_item_resources() ) { ?>
<li><a href="<?php echo osc_item_url() ; ?>"><?php echo osc_item_title() ; ?></a><div class="noblock_slider"><a href="<?php echo osc_item_url() ; ?>"><img src="<?php echo osc_resource_thumbnail_url() ; ?>" width="94" height="94" alt="" /></a></div></li>
<?php } else { ?>
<?php } ?>
</ul>
</div>
<div style="width:488px;">
<div id="left_scroll"><img src="/images/prevArrow.png" /></div>
<div id="right_scroll"><img src="/images/nextArrow.png" /></div>
</div>
</div>
<?php } ?>
';
}
?>
Thanks!

[trains58554]

Ok try this code I fixed a few errors so that the line below works now

Code: [Select]

<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url("jquery_1_3_2.js") ; ?>"></script>

Code: [Select]

<?php
$useragent = $_SERVER['HTTP_USER_AGENT']; 
if (preg_match('|MSIE ([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'IE';
} elseif (preg_match('|Opera/([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Opera';
} elseif(preg_match('|Firefox/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Firefox';
} elseif(preg_match('|Safari/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Safari';
} elseif(preg_match('|Chrome/([0-9\.]+)|',$useragent,$matched)) {
        $browser_version=$matched[1];
        $browser = 'Chrome'; 
}   else {
        // Browser nicht erkannt!
    $browser_version = 0;
    $browser= 'anderer';
}

if ($browser == "IE" AND $browser_version < "8.0") {
echo '<font style="color:red;">Sie benutzen den Internet Explorer 7. Bitte aktualisieren Sie Ihren Browser um eine dynamische Artikelübersicht einzusehen.</font>';
}
else { ?>
<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('jquery_1_3_2.js') ;?> "></script>
<script type="text/javascript">
  $(document).ready(function() {

        $("#carousel_ul li:first").before($("#carousel_ul li:last"));     
        $("#right_scroll img").click(function(){
       
            var item_width = $("#carousel_ul li").outerWidth() + 0;
           
            var left_indent = parseInt($("#carousel_ul").css("left")) - item_width;
           
            $("#carousel_ul:not(:animated)").animate({"left" : left_indent},500,function(){   
               
                $("#carousel_ul li:last").after($("#carousel_ul li:first"));
               

                $("#carousel_ul").css({"left" : "-122px"});
            });
        });
       

        $("#left_scroll img").click(function(){
           
            var item_width = $("#carousel_ul li").outerWidth() + 0;
           

            var left_indent = parseInt($("#carousel_ul").css("left")) + item_width;
           
            $("#carousel_ul:not(:animated)").animate({"left" : left_indent},500,function(){   
           
         
            $("#carousel_ul li:first").before($("#carousel_ul li:last"));

            $("#carousel_ul").css({"left" : "-122px"});
            });
           
           
        });
  });
</script>
<?php while ( osc_has_latest_items() ) { ?>
<div id="carousel_container">
<div id="carousel_inner">
<ul id="carousel_ul">
<?php if( osc_count_item_resources() ) { ?>
<li><a href="<?php echo osc_item_url() ; ?>"><?php echo osc_item_title() ; ?></a><div class="noblock_slider"><a href="<?php echo osc_item_url() ; ?>"><img src="<?php echo osc_resource_thumbnail_url() ; ?>" width="94" height="94" alt="" /></a></div></li>
<?php } else { ?>
<?php } ?>
</ul>
</div>
<div style="width:488px;">
<div id="left_scroll"><img src="/images/prevArrow.png" /></div>
<div id="right_scroll"><img src="/images/nextArrow.png" /></div>
</div>
</div>
<?php } 

}
?>


[ANDREPEREIRA]

Diego
did you get the solution ?
Can you send me the slideshow plugin to me ? andrepereira@ig.com.br  or get a place to download ?
Thanks !
 

[trains58554]

Hi

I have created a plugin to display items in a slide show layout. You can check it out here http://forums.osclass.org/index.php/topic,1819.0.html

[kingsult]

Hi,

Any place where we can see it in action ?

I have made one on my site. If someone can help me to make it a plugin, I would appreciate...

Thanks,

[trains58554]

Hi,

Any place where we can see it in action ?

I have made one on my site. If someone can help me to make it a plugin, I would appreciate...

Thanks,

I can help make it a plugin if you want.

[kingsult]

Great ! Send me your email and I will send you the code...

[kingsult]

Please follow this link to see the result of Jay's work ;-)

http://forums.osclass.org/index.php/topic,2154.0.html

[ANDREPEREIRA]

Before installing this plugin item_caroussel was working fine. Before instaling this new pluging, i have this error and don't know how to solve them, any help. Please !

Notice: Plugin carousel_for_osclass/index.php está faltando seu arquivo principal in /home/wwwclea/public_html/classificados/oc-includes/osclass/plugins.php on line 101

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/wwwclea/public_html/classificados/oc-includes/osclass/plugins.php:101) in /home/wwwclea/public_html/classificados/oc-includes/osclass/core/Session.php on line 39

[ANDREPEREIRA]

now is fixed, just changed data base and resset !
Never install plugins made to the same core. Uninstall before !