Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: tweeking a jquery slideshow script to make responsive
GugUser wrote #290454:
What I’m asking is the HTML output that you can look as the source code in the browser.
Sorry, I’m somewhat confused here. This is what I copied out of the browser inspector in Chrome:
<div id="front_showcase" class="images" style="position: relative; overflow: hidden; border: none; width: 100%; height: auto; z-index: 1001;">
<script type="text/javascript">
$(function() {
$("#front_showcase").showcase
({
css: { width: "1080px", height: "500px" },
animation: { type: "fade", interval: 5000, speed: 1200 },
images: [
{ url:"/images/195.jpg",
. . .But, as I have said, this does not actually show the image correctly as it comes up an image with a height of 0.
Offline
#14 2015-05-05 01:42:41
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: tweeking a jquery slideshow script to make responsive
I looked the generated HTML code in one of your sites, www.cycletrailsaustralia.com, where you use the same script. The original and the generated code together are somthing like this:
<div id="front_showcase_1080" class="images" style="width: 1080px; height: 500px; overflow: hidden; position: relative; border: none; z-index: 1001;">
<script type="text/javascript">
$(function() {
$("#front_showcase_1080").showcase({
css: { width: "1080px", height: "500px", },
animation: { type: "fade", interval: 5000, speed: 1500 },
images: [
{ url:"/images/248.jpg",
description: "Text"},
(…)
],
(…)
});
});
</script>
<div id="slider" style="position: absolute;">
<a href="#" target="_self" style="position: absolute; top: 0px; left: 0px; opacity: 1; z-index: 999;">
<img src="/images/248.jpg" alt="Text" style="border: 0px;">
</a>
(…)
</div>
<div id="navigator" style="border: none; padding: 5px; margin: 5px; position: absolute; z-index: 1000; top: 0px; right: 0px; opacity: 1;">
(…)
</div>
<div id="subBar" style="opacity: 0.6; width: 98%; overflow: hidden; z-index: 10002; position: absolute; bottom: 0px; color: rgb(102, 102, 51); background-color: rgb(255, 255, 255); height: 1.1em; padding: 4px; font-style: italic; font-weight: bold; font-size: 0.875em; margin: 0px 0.5%; left: 0px; right: 0px;">
(…)
</div>
</div>I think you must change more details as I suggested at the beginning.
There are in the inicial script definitions for width and height for the #front_showcase_1080 container. Maybe you have to replace this too.
In your external CSS file exist some declarations for #front_showcase_1080 and #showcase_1080. Consider this too.
Thera are no declarations for the <img /> tag.
Last edited by GugUser (2015-05-05 11:40:40)
Offline
Re: tweeking a jquery slideshow script to make responsive
GugUser wrote #290456:
I think you must change more details as I suggested in the beginning.
There are in the initial script definitions for width and height for the
#front_showcase_1080container. Maybe you have to replace this too.In your external CSS file exist some declarations for
#front_showcase_1080and#showcase_1080. Consider this too.
I guess that fundamentally there’s no real reason why this can’t be made responsive,
There’s just that muddle of CSS, patched together over the last 5 years and now with a whole bundle of redundant crap in there, that I really need to tidy up, finally.
I did have a problem with the slideshow disappearing last year and it was resolved by removing a redundant width="100%", or it might have been max width="100%".
Thanks for taking the time to look at all that. Clearly I do have some work to do there.
I’m just not sure as to whether the js needs additional coding, a routine to check the screen width, then shrink the image down to suit the 768px width or whatever it is.
Offline