jquery load a specific #Div content from multiple html files
- by Vikram
Hello friends
I am trying to make a Content Slider for my site. I have multiple HTML files and the structure of these files is like this:
<div id="title"><h2>Title of the Slide</h2></div>
<div id="image"><a href="http://mylink.com"><img src="image.jpg" width="600" height="300" alt="image"</a></div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
I have been trying to use the following script get content (but no success):
<?php
function render($position="") {
ob_start();
foreach(glob("/slides/*.html") as $fileName) {
$fname = basename( $fileName );
$curArr = file($fname);
$slides[$fname ]['title'] = $curArr[0];
$slides[$fname ]['image'] = $curArr[1];
$slides[$fname ]['content'] = $curArr[2];
foreach($slides as $key => $value){
?>
<div id="slide-title">
<?php echo $value['title'] ?>
</div>
<div id="slide-content">
<?php echo $value['image'] ?>
</div>
<div id="slide-image">
<?php echo $value['content'] ?>
</div>
<?php
}}
?>
<?php
return ob_get_clean();
}
But then I came to know about a jQuery function.... (again no success)
jQuery.noConflict();
(function($){
$(document).ready(function () {
$('#slide-title').load('slides/slide1.html #title');
$('#slide-content').load('slides/slide1.html #content');
$('#slide-image').load('slides/slide1.html #image');
});
})(jQuery);
Now My questions are.....
Am I using the right syntax.
How do I get the content from multiple files using jQuery.
Please Note : My knowledge on Programming is almost '0'. I have just started learning it.
