Background: At the moment I have a static timeline html/css/jQuery. I want to take it a step further so I made a separate admin page that allows a user to enter the informatiom they want and a picture to appear on the timeline on the correct date (which is saved as date in the database)
I do not know how I can get the timeline to generate so that it displays entries from the database rather that the static timeline loader in the html page. So in other words it pulls the heading, the description the date and the image that was uploaded.
My thinking was using a foreach loop to echo the variables inside the tags that are already there. Such as this:
<div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
<img src="$image" alt=""/>
</a>
<h2>'$date'</h2>
<span><?php echo '$about' ?> </span>
<div class="read_more" data-id="12/05/2012">Read more</div>
Sorry this is probably wrong, I'm not sure how to implement it in php.
Load Function:
$(window).load(function() {
// light
$('.tl1').timeline({
openTriggerClass : '.read_more',
startItem : '15/08/2014',
closeText : 'x',
ajaxFailMessage: 'This ajax fail is made on purpose. You can add your own message here, just remember to escape single quotes if you\'re using them.'
});
$('.tl1').on('ajaxLoaded.timeline', function(e){
var height = e.element.height()-60-e.element.find('h2').height();
e.element.find('.timeline_open_content span').css('max-height', height).mCustomScrollbar({
autoHideScrollbar:true,
theme:"light-thin"
});
});
});
Page that loads Timeline:
<div class="timelineLoader">
<img src="images/timeline/loadingAnimation.gif" />
</div>
<!-- BEGIN TIMELINE -->
<div class="timelineFlat tl1">
<div class="item" data-id="04/05/2014" data-description="Lorem ipsum">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/1.jpg" rel="lightbox[timeline]">
<img src="images/videoConferencingnodevices.jpg" width="410" height"275" alt=""/>
</a>
<h2>MAY, 4</h2>
<span>Example</br>
Example
</span>
<div class="read_more" data-id="04/05/2014">Read more</div>
</div>
<div class="item_open" data-id="04/05/2014" data-access="ajax-content-no-image.html">
<div class="item_open_content">
<img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
</div>
</div>
<div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
<img src="images/collabcompliant.jpg" alt=""/>
</a>
<h2>MAY, 12</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerc...</span>
<div class="read_more" data-id="12/05/2012">Read more</div>
</div>
<div class="item_open" data-id="12/05/2012" data-access="ajax-content-no-image.html">
<div class="item_open_content">
<img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
</div>
</div>
Can anyone help me with how I can achieve this outcome and get the data to generate from the database?
