Public Forums 71,145 posts

[seamans Friend seamansJoin date: June 2015Posts: 7Downloads:1Uploads:1 Thanks: 3]

#207183

Hi,

I’ve copied exactly same code for the slideshow from the template. When I copy the code using TinyMCE the editor deletes the

<ul>
<li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ul>
part of the code. I tried to use the JCE editor it does not delete that part but the carousel is not working properly.
Indicators are shown above the pictures and the arrows are not shown at all. (although indicators are at wrong place the are functioning properly). I’m using the original purity iii template. The code I copied is below:

<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators -->
<ul>
<li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"><img src="images/joomlart/slideshow/sl-1.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>Your perfect starting template, Purity III</h2>
<p>Either it's your first time with Joomla or you are a developer already, Purity III won't let you down.</p>
</div>
</div>
<div class="item"><img src="images/joomlart/slideshow/sl-2.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>This is the best FREE Joomla 3 template!</h2>
<p>We have drunken too much of the best? but this repsonsive Joomla template truly is, and IT'S FREE!</p>
</div>
</div>
<div class="item"><img src="images/joomlart/slideshow/sl-3.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>The next generation of Purity series</h2>
<p>Sophisticated in Design, Brilliant in Features. That's how we define Purity Series.</p>
</div>
</div>
</div>
<!-- Controls --></div>
</div>

It is shown like this:

Thank you

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#573576

Hello
Please add the code again .
Before Adding the code in custom Html module go to System>> Global Config.>>> Set Default Editor to NONE .
Then add the code in module editor .
The editor will auto remove the code so the Navigation not showing .

[seamans Friend seamansJoin date: June 2015Posts: 7Downloads:1Uploads:1 Thanks: 3]

#573603

Hi,

I tried what you explained. As you said the editor does not remove the code now but it is the same as I posted before(no arrows. 3 dots which are working when clicked but at the wrong position).

I’m trying to find the reason and installed joomla locally. When I install the 3.4.1 packet the problem exist. But when I install the purity iii quickstart packet(joomla 3.3.6) it works properly. Is the joomla version making the trouble?

I’ve tried lots of configuration and see that when I edit the custom html module or without editing anything if I save the module then the slider not working correctly(while it is working after a clean install)

Thank you

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#573685

Hi
joomla version shouldn’t be problem .
Please share your working site url , so i can check it directly on your site.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#738699

Hi
joomla version shouldn’t be problem .
Please share your working site url , so i can check it directly on your site.

[seamans Friend seamansJoin date: June 2015Posts: 7Downloads:1Uploads:1 Thanks: 3]

#573722

Hi,
I’ve used the code in this thread (http://www.joomlart.com/forums/topic/black-dots-in-purity-iii-slideshow/) and the dots became normal and working properly. But there were white squares instead of arrows. By comparing the bootstrap.css file I’ve realised that glyphicons font url is problematic. They were like this: url(‘../../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.eot’). After Erasing one of the “../” part the arrows appeared. I’ve applied this to 6 different font url. I dont know if this is a goog solution but if it is the true way then the css file is wrong which I’ve never edited.
Thank you

[seamans Friend seamansJoin date: June 2015Posts: 7Downloads:1Uploads:1 Thanks: 3]

#738736

Hi,
I’ve used the code in this thread (http://id.joomlart.com/forums/topic/black-dots-in-purity-iii-slideshow/) and the dots became normal and working properly. But there were white squares instead of arrows. By comparing the bootstrap.css file I’ve realised that glyphicons font url is problematic. They were like this: url(‘../../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.eot’). After Erasing one of the “../” part the arrows appeared. I’ve applied this to 6 different font url. I dont know if this is a goog solution but if it is the true way then the css file is wrong which I’ve never edited.
Thank you

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#573777

Hi
Without checking the issue its tough to assume about it .
As you solved its great you can write back if you face any issues.

2 users say Thank You to Pankaj Sharma for this useful post

1. seamans
2. probertson34

[probertson34 Friend probertson34Join date: August 2014Posts: 17Downloads:5Uploads:2 Thanks: 10]

#575846

I have had an issue that is related to this one (I think:laugh:)
on my site creativemathandmusic.com I used the Corporate Template with a number of changes. I turn off Tiny MCE and I validated that the original code was not modified/deleted and have made some changes, but the “left/right” navigation buttons move up and down the sides of the whole page based on how high the overall window is. I would like those buttons to be centered on the Slideshow Window only, not the whole page. I turned off the gradient too because it was on the whole page. I have used Firebug and modified a number of elements, but nothing seems to fix that. I have turned off the Optimize CSS and JS on the site if you could help me find the right solution. thanks, …paul

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#575869

Hi Paul,

Unfortunately, these control buttons will be based on the screen size, the same with other elements on your site. You can use the media queries to modify the position of these navigation buttons.

[probertson34 Friend probertson34Join date: August 2014Posts: 17Downloads:5Uploads:2 Thanks: 10]

#575921

Thank you for the response. It is the Carousel buttons that I would like to be relative to the Slideshow Module and not the page. When I view the Purity III live demo site – Corporate Template, the Left and Right Chevrons are always relative to the Slideshow Window, not the page. How do I achieve that?

<em>@Saguaros 480621 wrote:</em><blockquote>Hi Paul,

Unfortunately, these control buttons will be based on the screen size, the same with other elements on your site. You can use the media queries to modify the position of these navigation buttons.</blockquote>

[probertson34 Friend probertson34Join date: August 2014Posts: 17Downloads:5Uploads:2 Thanks: 10]

#642250

Thank you for the response. It is the Carousel buttons that I would like to be relative to the Slideshow Module and not the page. When I view the Purity III live demo site – Corporate Template, the Left and Right Chevrons are always relative to the Slideshow Window, not the page. How do I achieve that?

<em>@Saguaros 480621 wrote:</em><blockquote>Hi Paul,

Unfortunately, these control buttons will be based on the screen size, the same with other elements on your site. You can use the media queries to modify the position of these navigation buttons.</blockquote>

[probertson34 Friend probertson34Join date: August 2014Posts: 17Downloads:5Uploads:2 Thanks: 10]

#740910

Thank you for the response. It is the Carousel buttons that I would like to be relative to the Slideshow Module and not the page. When I view the Purity III live demo site – Corporate Template, the Left and Right Chevrons are always relative to the Slideshow Window, not the page. How do I achieve that?

<em>@Saguaros 480621 wrote:</em><blockquote>Hi Paul,

Unfortunately, these control buttons will be based on the screen size, the same with other elements on your site. You can use the media queries to modify the position of these navigation buttons.</blockquote>

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#575961

First of all, you need to go to Global Configuration on your site and turn off editor by set ‘Default Editor’ option to ‘None’

Then go to this carousel slide module & check the content output again. This is output of this module in our demo site:


<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">

<div class="item active">
<img src="images/joomlart/slideshow/sl-1.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>Your perfect starting template, Purity III</h2>
<p>Either it's your first time with Joomla or you are a developer already, Purity III won't let you down.</p>
</div>
</div>

<div class="item">
<img src="images/joomlart/slideshow/sl-2.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>This is the best FREE Joomla 3 template!</h2>
<p>We have drunken too much of the best… but this repsonsive Joomla template truly is, and IT'S FREE!</p>
</div>
</div>
<div class="item">
<img src="images/joomlart/slideshow/sl-3.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>The next generation of Purity series</h2>
<p>Sophisticated in Design, Brilliant in Features. That's how we define Purity Series.</p>
</div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

</div>


You can make a comparison.

2 users say Thank You to Saguaros for this useful post

1. probertson34
2. griong

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#642290

First of all, you need to go to Global Configuration on your site and turn off editor by set ‘Default Editor’ option to ‘None’

Then go to this carousel slide module & check the content output again. This is output of this module in our demo site:


<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">

<div class="item active">
<img src="images/joomlart/slideshow/sl-1.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>Your perfect starting template, Purity III</h2>
<p>Either it's your first time with Joomla or you are a developer already, Purity III won't let you down.</p>
</div>
</div>

<div class="item">
<img src="images/joomlart/slideshow/sl-2.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>This is the best FREE Joomla 3 template!</h2>
<p>We have drunken too much of the best… but this repsonsive Joomla template truly is, and IT'S FREE!</p>
</div>
</div>
<div class="item">
<img src="images/joomlart/slideshow/sl-3.jpg" alt="Sample image" />
<div class="carousel-caption">
<h2>The next generation of Purity series</h2>
<p>Sophisticated in Design, Brilliant in Features. That's how we define Purity Series.</p>
</div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

</div>


You can make a comparison.

3 users say Thank You to Saguaros for this useful post

1. probertson34
2. griong
3. noszone

[Author]

Posts