Jquery Gallery Question

Hi Craig,

I took a look at the code and the images are being added into the CSS rules. In order to do this dynamically from the CMS you'd have to have your CSS written into the head of your file and you'd have to use a php foreach loop to dynamically create your CSS rules.

You can give this a try or look into finding a different slideshow script. There are a number of good free ones available.

Hope this helps get you started.

Hi Jason

thank you for that do you know any sliders that will do it the same way as that one as the client has its mind set on that layout.

thanks

Craig

Hi Craig,

You can get the slider you posted to work with CMS Builder.

Firstly, you'll need to identify all the places in the code that need to be changed if you want to update the slider.

in index.php:

<div class="row-slider clear">
<ul id="gallery">
<li class="slider-bg1">
<span class="slider-bg"></span>
<span class="box-slider-text"><span class="extra-height"><span class="slider-text">
<span class="slider-text-wrapper">
<span class="slider-indent-text">
<span class="text-top">Tarta de Mariscos</span>
<a href="#" class="text-bottom">read more</a>
</span>
</span>
</span></span></span>
</li>
<li class="slider-bg2">
<span class="slider-bg"></span>
<span class="box-slider-text"><span class="extra-height"><span class="slider-text">
<span class="slider-text-wrapper">
<span class="slider-indent-text">
<span class="text-top">Adipiscing Eliasra</span>
<a href="#" class="text-bottom">read more</a>
</span>
</span>
</span></span></span>
</li>
...
</ul>
</div>

in style.css:

.slider-bg1{ background:url(../images/thumb1.jpg) 0 0 no-repeat;}
.slider-bg2{ background:url(../images/thumb2.jpg) 0 0 no-repeat;}
...

As Jason mentioned, you'll probably find it easier to move dynamic styles from your CSS file into your PHP page. So let's start by removing the CSS rules above from style.css and putting them in index.php:

<style>
.slider-bg1{ background:url(../images/thumb1.jpg) 0 0 no-repeat;}
.slider-bg2{ background:url(../images/thumb2.jpg) 0 0 no-repeat;}
...
</style>
</head>

Now we can ignore style.css, because there's nothing in there that will need to change anymore.

Now, to make everything dynamic...

Does that help get you started? Please let me know if you have any questions.

Hi Chris

i was able to work out a great way to get it to work without moving the css and have it all working the way i wanted to this is great now.

I have attached the index.php file with all the changes i have made to the file.

Hi Craig,

Nicely done. :)

Glad you got everything sorted out. Please let me know if you have any questions.