Jquery Gallery Question

6 posts by 3 authors in: Forums > CMS Builder
Last Post: December 22, 2010   (RSS)

Hi

I have this new site http://www.parea.com.au/index.php and i like the gallery slider on the home page but i how can make this work with CMS builder. I guess i will need to have a multi section in the system where i can upload the images for each section along with the extra wording that will be shown along with the link once you slide over the image.

But at the moment the style sheet is loading the image and i dont know how i should go about this to make it all work like the site is now.

I have attached the source code for the index and css file.
Thanks



Craig

KC Media Solutions

www.kcmedia.biz
Attachments:

index_029.php 14K

style_004.css 14K

Re: [kcmedia] Jquery Gallery Question

By Jason - December 21, 2010

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.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [kcmedia] Jquery Gallery Question

By Chris - December 21, 2010

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.
All the best,
Chris

Re: [chris] Jquery Gallery Question

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.
Thanks



Craig

KC Media Solutions

www.kcmedia.biz
Attachments:

index_030.php 13K

Re: [kcmedia] Jquery Gallery Question

By Chris - December 22, 2010

Hi Craig,

Nicely done. :)

Glad you got everything sorted out. Please let me know if you have any questions.
All the best,
Chris