Kareem Hussein Kareem Hussein - 19 days ago 4
Javascript Question

how to insert many posts in Slider with Php?

i have a script im working on now and i have a simple problem but i can't solve it

the loop is not working right and posts keep repeating

and i do have 2 < div class > in the slider :

small & big2

the small have to be 6 posts then 1 big
then 6 small and 1 big
then 6 small and 1 big to work right

( repeated 3 times i mean )

and i was working a lot at the slider but without any success and really it bother me :S

the slider source code can be viewed here : http://weestates.com/slider/

and can be downloaded : ( please add slider.zip after /slider/ in the link )

this is one at my website and the best merging code i could do :

http://myguest.weestates.com/

Code :

<!-- Slider -->
<div class="sectionTop">
<div class="sliderTop" style="position: relative; top: 0px; left: 0px; overflow: hidden; z-index: 1; perspective: 1000px; backface-visibility: hidden; width: 1663px; height: 518px;">
<ul style="position: relative; cursor: move; backface-visibility: hidden; width: 3237px; left: -6474px;">
<!-- Loop 1 -->
<li style="width: 1069px; backface-visibility: hidden; overflow: hidden; position: absolute; left: 6474px;">
<div class="sectionItemTop">
<?php
$newsAll = $News->showAllNews(6);
if($newsAll):
foreach($newsAll AS $news):
?>
<div class="small">
<a href="<?php echo(($news->series_id) ? converter_episode($news->news_id, $news->news_title):converter_movie($news->news_id, $news->news_title)); ?>" title="<?php echo($news->news_title); ?>">
<img src="<?php echo(SITE_SLACH); ?>upload_imgs/<?php echo($news->img_file); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="<?php echo($news->news_title); ?>" height="640" width="490">
<div class="title"><?php echo($news->news_title); ?></div>
</a>
</div>

<div class="big2">
<a href="<?php echo(($news->series_id) ? converter_episode($news->news_id, $news->news_title):converter_movie($news->news_id, $news->news_title)); ?>" title="<?php echo($news->news_title); ?>">
<img src="<?php echo(SITE_SLACH); ?>upload_imgs/<?php echo($news->img_file); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="<?php echo($news->news_title); ?>" height="640" width="490">
<div class="title"><?php echo($news->news_title); ?></div>
</a>
</div>
<?php
endforeach;
endif;
?>
</div>
</li>
<!-- End Loop 1 -->

<!-- Loop 2 -->
<li style="width: 1069px; backface-visibility: hidden; overflow: hidden; position: absolute; left: 7553px;">
<div class="sectionItemTop">
<?php
$newsAll = $News->showAllNews(6);
if($newsAll):
foreach($newsAll AS $news):
?>
<div class="small">
<a href="<?php echo(($news->series_id) ? converter_episode($news->news_id, $news->news_title):converter_movie($news->news_id, $news->news_title)); ?>" title="<?php echo($news->news_title); ?>">
<img src="<?php echo(SITE_SLACH); ?>upload_imgs/<?php echo($news->img_file); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="<?php echo($news->news_title); ?>" height="640" width="490">
<div class="title"><?php echo($news->news_title); ?></div>
</a>
</div>

<div class="big2">
<a href="<?php echo(($news->series_id) ? converter_episode($news->news_id, $news->news_title):converter_movie($news->news_id, $news->news_title)); ?>" title="<?php echo($news->news_title); ?>">
<img src="<?php echo(SITE_SLACH); ?>upload_imgs/<?php echo($news->img_file); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="<?php echo($news->news_title); ?>" height="640" width="490">
<div class="title"><?php echo($news->news_title); ?></div>
</a>
</div>
<?php
endforeach;
endif;
?>
</div>
</li>
<!-- End Loop 2 -->

<!-- Loop 3 -->
<li style="width: 1069px; backface-visibility: hidden; overflow: hidden; position: absolute; left: 5395px;">
<div class="sectionItemTop">
<?php
$newsAll = $News->showAllNews(6);
if($newsAll):
foreach($newsAll AS $news):
?>
<div class="small">
<a href="<?php echo(($news->series_id) ? converter_episode($news->news_id, $news->news_title):converter_movie($news->news_id, $news->news_title)); ?>" title="<?php echo($news->news_title); ?>">
<img src="<?php echo(SITE_SLACH); ?>upload_imgs/<?php echo($news->img_file); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="<?php echo($news->news_title); ?>" height="640" width="490">
<div class="title"><?php echo($news->news_title); ?></div>
</a>
</div>

<div class="big2">
<a href="<?php echo(($news->series_id) ? converter_episode($news->news_id, $news->news_title):converter_movie($news->news_id, $news->news_title)); ?>" title="<?php echo($news->news_title); ?>">
<img src="<?php echo(SITE_SLACH); ?>upload_imgs/<?php echo($news->img_file); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="<?php echo($news->news_title); ?>" height="640" width="490">
<div class="title"><?php echo($news->news_title); ?></div>
</a>
</div>
<?php
endforeach;
endif;
?>
</div>
</li>
<!-- End loop 3 -->
</ul>
<i class="i2233" style="position: absolute; right: 10px; bottom: 10px; z-index: 1000; font-style: normal; background: rgb(255, 255, 255) none repeat scroll 0% 0%; opacity: 0.2;">demo version</i>
<i class="i2233" style="position: absolute; right: auto; bottom: auto; z-index: 1000; font-style: normal; background: rgb(255, 255, 255) none repeat scroll 0% 0%; opacity: 0.2; top: 10px; left: 10px;">demo version</i>
</div>
<a href="javascript:void(0);" id="watch-prev" style="cursor: pointer;"><i class="fa fa-angle-left"></i></a>
<a href="javascript:void(0);" id="watch-next" style="cursor: pointer;"><i class="fa fa-angle-right"></i></a>
</div>
<!-- Slider End -->


what should i do to make it work correctly without repeating the loops and to make it looks like the one in the slider demo ?

Help please :(

Answer

As I mentioned in my comment, you have to fetch all the record you want to show at once.

Then loop through them and separate them 7 by 7

In each batch of 7, the first record css class will be big2 and others css class will be small

Also You have to open the <li><div class="sectionItemTop"> at the begining of each batch and close them at the end of each batch </div></li>.

So the code will look like this:

<!-- Slider -->
<div class="sectionTop">
    <div class="sliderTop">
        <ul>
            <?php
            $newsAll = $News->showAllNews(21);
            if($newsAll):
                $iCnt = 1;
                foreach($newsAll AS $news):
                    if($iCnt == 1){
                        $strClass = 'big2';
                        echo '<li><div class="sectionItemTop">';
                    }
                    else
                        $strClass = 'small';
                    ?>
                    <div class="<?php echo $strClass;?>">
                        <a href="<?php echo(($news->series_id) ? converter_episode($news->news_id, $news->news_title):converter_movie($news->news_id, $news->news_title)); ?>" title="<?php echo($news->news_title); ?>">
                            <img src="<?php echo(SITE_SLACH); ?>upload_imgs/<?php echo($news->img_file); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="<?php echo($news->news_title); ?>" height="640" width="490">
                            <div class="title"><?php echo($news->news_title); ?></div>
                        </a>
                    </div>
                    <?php
                    if($iCnt == 7){
                        $iCnt = 1;
                        echo '</div></li>';
                    }
                    else
                        $iCnt++;
                endforeach;
            endif;
            ?>
        </ul>
        <i class="i2233" style="position: absolute; right: 10px; bottom: 10px; z-index: 1000; font-style: normal; background: rgb(255, 255, 255) none repeat scroll 0% 0%; opacity: 0.2;">demo version</i>
        <i class="i2233" style="position: absolute; right: auto; bottom: auto; z-index: 1000; font-style: normal; background: rgb(255, 255, 255) none repeat scroll 0% 0%; opacity: 0.2; top: 10px; left: 10px;">demo version</i>
    </div>
    <a href="javascript:void(0);" id="watch-prev" style="cursor: pointer;"><i class="fa fa-angle-left"></i></a>
    <a href="javascript:void(0);" id="watch-next" style="cursor: pointer;"><i class="fa fa-angle-right"></i></a>
</div>
<!-- Slider End -->