I'm facing a challenge with a problem that I can't seem to resolve. The issue lies in my use of this plugin for displaying random images.
The only step left is to refresh the content within the div. However, every time I attempt to do so, the animation comes to a halt! It simply ends up showing pictures stacked on top of each other without any animation.
Here's the code snippet responsible for the refresh:
<script>
var auto_refresh = setInterval(function () {
$('#updatepic').load('updatepicx.php');
}, 5000);
</script>
<div id="updatepicx"></div>
If I manually execute updatepicx.php, it works perfectly fine. But whenever I try to integrate this into the index.php for automatic refreshing, the animation stops working altogether.
Where could the problem possibly lie?
This is the code from updatepicx.php:
<?php include('core/init.php');
include('includes/article.php');?>
<?php
$article = new Article;
$articles=$article->fetch_all4();
$categorie = new Article;
$categories=$categorie->fetch_allonecategorie();
$image = new Article;
$images=$image->fetch_all6();
?>
<!-- Numerous JavaScript and CSS script references follow here -->
<div id="carousel">
<?php foreach ($images as $image){
$title='<font color=red>name:</font>'.$image['article_title'].''.str_repeat(' ', 40).'
<font color=red>categorie:</font>'.$image['categorie'].''.str_repeat(' ', 20).'
<a style=text-decoration:underline; href=article.php?id='.$image['article_title'].'><font color=#0086D2>view</font>';
?>
<a href="imagecible/<?Php echo $image['image'];?> "title="<?Php echo $title;?>" rel="imagebox" ><img class="imgfx"
src="imagecible/<?Php echo $image['image'];?> " width="100%"></a>
<?Php }?>
</div>
<script type="text/javascript">
window.onload =
function()
{
$('#carousel').Carousel(
{
itemWidth: 110,
itemHeight: 62,
itemMinWidth: 50,
items: 'a',
reflections: .5,
rotationSpeed: 1.8
}
);
$.ImageBox.init(
{
loaderSRC: 'images/loading.gif',
closeHTML: '<img src="images/close.jpg" />'
}
);
};
$(document).ready(function() {
$("#Imx").on("click", function () {
$("#ImageBoxContainer").hide();
})
});
</script>
<div id="cAssistentHelper" style="position: absolute;z-index: 9999"></div>
<div id="ImageBoxOverlay" style="position: absolute; top: 0px; left: 0px; opacity: 0; height: 705px; width: 1366px; display: none;"> </div>
<div id="ImageBoxOuterContainer" style="position: absolute; overflow: hidden; top: 47px; left: 0px; text-align: center; width: 1366px; display: none; background-color: transparent;">
<div id="ImageBoxContainer" style="position: relative; overflow: hidden; text-align: left; margin: 0px auto; top: 0px; left: 0px; z-index: 2; width: 52px; height: 52px;">
<img src="images/loading.gif" id="ImageBoxLoader" style="position: absolute; left: 10px; top: 10px;">
</div><div id="ImageBoxCaption" style="position: relative; text-align: left; margin: 0px auto; z-index: 1; visibility: hidden;">
<div id="ImageBoxCaptionText" style="padding-left: 10px;">Flash lights</div>
<div id="ImageBoxCaptionImages" style="padding-left: 10px; padding-bottom: 10px;">
</div><a id="ImageBoxClose" href="" style="position: absolute; right: 10px; top: 0px;"><img id="Imx" src="images/close.jpg"></a></div></div>