Thread

Hi,

I have a HTML/CSS template from Themeforest where there is a Javascript Slider:

http://themeforest.net/item/circlespace-business-theme/full_screen_preview/885380

I am translating the template it into EE:

I have created all the templates in template manager, copied the HTML code, created the css files and so on.

But I don’t know what do I have to do for the slider to work within EE, right now my template in EE looks like this:

http://kreatibe.com/

Do I need to embed a exp tag or something for the JQuery Slider to work?

I don’t know manage myself much with script languages… any help will be deeply appreciated

Thanks

EE is backend.  jQuery is front end.

Your task - in simplest of terms - is to get EE to write out the HTML/CSS that the jQuery is expecting. 

You could either hardcode the HTML that the jquery hooks onto, or have that content coming from an EE channel where the text and images are stored.

The theme HTML looks pretty well marked up so it should be straightforward.

I’d put all your jQuery in an external file and call it using a standard ExpressionEngine template which you can call from anywhere.

I have attached how we set up our template groups -

_content
_functions
_scaffolding

We put things like the header, footer, sidebar etc in the _scaffolding group and we can pass variables to them if needed.

EE is backend.  jQuery is front end.

Your task - in simplest of terms - is to get EE to write out the HTML/CSS that the jQuery is expecting. 

You could either hardcode the HTML that the jquery hooks onto

How can I hardcore that HTML when is EE the one creating it dynamically?

, or have that content coming from an EE channel where the text and images are stored.

The theme HTML looks pretty well marked up so it should be straightforward.

As I said I know little about scripting, so I wouldn’t exactly how to do this… any advice?

Thanks

I’d put all your jQuery in an external file and call it using a standard ExpressionEngine template which you can call from anywhere.

I have attached how we set up our template groups -

_content
_functions
_scaffolding

We put things like the header, footer, sidebar etc in the _scaffolding group and we can pass variables to them if needed.

How can I call an external file in a EE template?

Just write HTML like you normally would. ExpressionEngine isn’t creating anything dynamically here.

Writing the javascript code directly in the template did not work for me, even using the

{exp:jquery:script_tag}

in the header.

After much searching I found the solution in Leonard Murphy’ Book “Building Websites with Expression Engine 2”, I don’t know if it is the best way, but the jquery slider now works perfectly on my website (and is really easy).

For the records, this is what I did:

Upload the folder with the javascript files to the root of my website over FTP.

Pointing to the scripts files using the {site_url} variable on the path, here the code in the header of the template:

<!—JAVA Files Starts—>

type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”><!—JQUERY—>

< script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”>< /script ><!—JQUERY—>
< script type=“text/javascript” src=”{site_url}/scripts/modernizr-2.0.6.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/jquery.quicksand.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/jquery.prettyPhoto.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/jquery.cycle.all.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/jquery.roundabout.min.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/jquery.easing.1.3.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/jquery.twitter.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/jquery.quovolver.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/hoverIntent.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/supersubs.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/superfish.js”}”>< /script >
< script type=“text/javascript” src=”{site_url}/scripts/custom.js”}”>< /script >

That’s it…! 😊

I’m just a newbie with EE and maybe my answer may not be the best but here’s what i’d do

1. i’d create a channel called homepage slider {homepage_slider}
2. Custom fields for the slider homepage slider would be slider image
  {slider_image} and slider subtitle {slider_subtitle}, then i’d create a folder under the uploads folder called homepage_slider upload my slider images there, then i’d assign the channel fields to the channel we created, then upload all your js files to the root of site, then here’s what my final code would look like

<!--CYCLE WRAPPER STARTS-->

    <div id="slider-wrapper">

     <!--SLIDE CONTAINER STARTS-->

        <div id="slide-container">

      <!--SLIDE STARTS-->
            {exp:channel:entries channel="homepage_slider"}
            <div id="{switch='slide-1|slide-2|slide-3'}" class="slide">
            
             <div class="container">

                    <div class="one_half">

                        {homepage_slider}

                    </div>

                    <div class="one_half last_column">






                        {title}

                        {slider_subtitle}

                        <div class="huge-button-holder"><a href="#class=huge-button"><span>LEARN MORE</span></a></div>

                    </div>

                </div>

            </div>
               {/exp:channel:entries}
            <!--SLIDE ENDS-->

 

        </div>

        <!--SLIDE CONTAINER ENDS-->

        <!--SLIDE'S PAGINATION STARTS-->

        <div id="cycle-pager"></div>

        <!--SLIDE'S PAGINATION ENDS-->

    </div>

    <!--CYCLE WRAPPER ENDS-->