Once I get my layout, then I go back and put a short leash on all the images. Yes G'kar, I was messing with it around that time. It will be hit or miss for the next few days. One question tho, I can not get it to load on my samsung(Android) phone(4g) and I am under the impression that it is timeing out due to the large image sizes? After I get my images under control, Is this where Responsive Layout Maker can help make things even better?
Marc Nevue
Registered User
324 posts
I was aware that a few of the images were running wild Once I get my layout, then I go back and put a short leash on all the images. Yes G'kar, I was messing with it around that time. It will be hit or miss for the next few days. One question tho, I can not get it to load on my samsung(Android) phone(4g) and I am under the impression that it is timeing out due to the large image sizes? After I get my images under control, Is this where Responsive Layout Maker can help make things even better?
Once I get my layout, then I go back and put a short leash on all the images. Yes G'kar, I was messing with it around that time. It will be hit or miss for the next few days. One question tho, I can not get it to load on my samsung(Android) phone(4g) and I am under the impression that it is timeing out due to the large image sizes? After I get my images under control, Is this where Responsive Layout Maker can help make things even better?
Steve
Senior Advisor
3,106 posts
Marc Nevue wrote:
I was aware that a few of the images were running wild Once I get my layout, then I go back and put a short leash on all the images. Yes G'kar, I was messing with it around that time. It will be hit or miss for the next few days. One question tho, I can not get it to load on my samsung(Android) phone(4g) and I am under the impression that it is timeing out due to the large image sizes? After I get my images under control, Is this where Responsive Layout Maker can help make things even better?
I was aware that a few of the images were running wild
Once I get my layout, then I go back and put a short leash on all the images. Yes G'kar, I was messing with it around that time. It will be hit or miss for the next few days. One question tho, I can not get it to load on my samsung(Android) phone(4g) and I am under the impression that it is timeing out due to the large image sizes? After I get my images under control, Is this where Responsive Layout Maker can help make things even better? Yes RLM is very good although I don't think this is what is causing you the issues. I think most of your problems here are because of your large image sizes. Keep in mind when you resize images within VSD you are really not reducing the size of the image you are just telling it what display size to use. When someone goes on your site it loads the full size of the image regardless of your width="?" height="?" .
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Eric Rohloff
Senior Advisor
20,245 posts
You'll need a new version on JQery Cycle or a different slider that's responsive.
This ones pretty easy.
http://flexslider.woothemes.com/
This ones pretty easy.
http://flexslider.woothemes.com/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Marc Nevue
Registered User
324 posts
Eric,
I downloaded woothemes, and replaced the two .js files. Then I changed the code, per the website: Now sure what I did wrong.
FROM:
$('#slideshow').cycle({
fx: 'fade',
timeout: 2000,
speed: 2000,
autostop: 1,
});
TO:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
I downloaded woothemes, and replaced the two .js files. Then I changed the code, per the website: Now sure what I did wrong.
FROM:
$('#slideshow').cycle({
fx: 'fade',
timeout: 2000,
speed: 2000,
autostop: 1,
});
TO:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
Eric Rohloff
Senior Advisor
20,245 posts
Where did you place your images?
The code has them here. http://test.dtscarpentry.com/jqueryslid … _add_1.jpg
Remove all the files associated with cycle.
I would place an html box on a new blank page to do your testing then you can copy the html box to your finished page once it's working.
The code has them here. http://test.dtscarpentry.com/jqueryslid … _add_1.jpg
Remove all the files associated with cycle.
I would place an html box on a new blank page to do your testing then you can copy the html box to your finished page once it's working.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Marc Nevue
Registered User
324 posts
Ok, well I got this back to 'working' order. I am yet to put Eric's suggestion of flexslider in place, sadly I can not seem to understand how to do this.
JamesD
Registered User
55 posts
Hi Marc,
To include the changing of the JS snippets, did you also make the HTML changes for the Flexslider?
For example, this is what I currently see within your page:
Note: There's broken anchor tag within this area too.
You'll see a '</a>' near the closing of the #slideshow div.
<div id="slideshow" class="pics">
<img src="jqueryslideshow/1_add_1.jpg" alt="Slideshow Image 1" width="450" height="433" />
<img src="jqueryslideshow/2_add_2.jpg" alt="Slideshow Image 2" width="450" height="433" />
<img src="jqueryslideshow/3_add_3.jpg" alt="Slideshow Image 3" width="450" height="433" />
<img src="jqueryslideshow/4_dealer_b4_1.jpg" alt="Slideshow Image 4" width="450" height="433" />
<img src="jqueryslideshow/5_dealer_b4_2.jpg" alt="Slideshow Image 1" width="450" height="433" />
<img src="jqueryslideshow/6_dealer_b4_3.jpg" alt="Slideshow Image 2" width="450" height="433" />
<img src="jqueryslideshow/7_Ellington_b4_1.jpg" alt="Slideshow Image 3" width="450" height="433" />
<img src="jqueryslideshow/8_Ellington_b4_2.jpg" alt="Slideshow Image 4" width="450" height="433" />
<img src="jqueryslideshow/9_Ellington_after_1.jpg" alt="Slideshow Image 1" width="450" height="433" />
<img src="jqueryslideshow/10_Ellington_after_2.jpg" alt="Slideshow Image 2" width="450" height="433" />
<img src="jqueryslideshow/11_fireplace.jpg" alt="Slideshow Image 3" width="450" height="433" />
<img src="jqueryslideshow/12_garage_start.jpg" alt="Slideshow Image 4" width="450" height="433" />
<img src="jqueryslideshow/13_garage_b4.jpg" alt="Slideshow Image 4" width="450" height="433" />
<img src="jqueryslideshow/14_garage_after.jpg" alt="Slideshow Image 4" width="450" height="433" />
</a>
</div>
Flexslider would need something like:
<div id="slideshow" class="pics flexslider">
<ul class="slides">
<li><img src="jqueryslideshow/1_add_1.jpg" alt="Slideshow Image 1" width="450" height="433" /></li>
<li><img src="jqueryslideshow/2_add_2.jpg" alt="Slideshow Image 2" width="450" height="433" /></li>
<li><img src="jqueryslideshow/3_add_3.jpg" alt="Slideshow Image 3" width="450" height="433" /></li>
<li><img src="jqueryslideshow/4_dealer_b4_1.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
<li><img src="jqueryslideshow/5_dealer_b4_2.jpg" alt="Slideshow Image 1" width="450" height="433" /></li>
<li><img src="jqueryslideshow/6_dealer_b4_3.jpg" alt="Slideshow Image 2" width="450" height="433" /></li>
<li><img src="jqueryslideshow/7_Ellington_b4_1.jpg" alt="Slideshow Image 3" width="450" height="433" /></li>
<li><img src="jqueryslideshow/8_Ellington_b4_2.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
<li><img src="jqueryslideshow/9_Ellington_after_1.jpg" alt="Slideshow Image 1" width="450" height="433" /></li>
<li><img src="jqueryslideshow/10_Ellington_after_2.jpg" alt="Slideshow Image 2" width="450" height="433" /></li>
<li><img src="jqueryslideshow/11_fireplace.jpg" alt="Slideshow Image 3" width="450" height="433" /></li>
<li><img src="jqueryslideshow/12_garage_start.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
<li><img src="jqueryslideshow/13_garage_b4.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
<li><img src="jqueryslideshow/14_garage_after.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
</ul>
</div>
To include the changing of the JS snippets, did you also make the HTML changes for the Flexslider?
For example, this is what I currently see within your page:
Note: There's broken anchor tag within this area too.
You'll see a '</a>' near the closing of the #slideshow div.
<div id="slideshow" class="pics">
<img src="jqueryslideshow/1_add_1.jpg" alt="Slideshow Image 1" width="450" height="433" />
<img src="jqueryslideshow/2_add_2.jpg" alt="Slideshow Image 2" width="450" height="433" />
<img src="jqueryslideshow/3_add_3.jpg" alt="Slideshow Image 3" width="450" height="433" />
<img src="jqueryslideshow/4_dealer_b4_1.jpg" alt="Slideshow Image 4" width="450" height="433" />
<img src="jqueryslideshow/5_dealer_b4_2.jpg" alt="Slideshow Image 1" width="450" height="433" />
<img src="jqueryslideshow/6_dealer_b4_3.jpg" alt="Slideshow Image 2" width="450" height="433" />
<img src="jqueryslideshow/7_Ellington_b4_1.jpg" alt="Slideshow Image 3" width="450" height="433" />
<img src="jqueryslideshow/8_Ellington_b4_2.jpg" alt="Slideshow Image 4" width="450" height="433" />
<img src="jqueryslideshow/9_Ellington_after_1.jpg" alt="Slideshow Image 1" width="450" height="433" />
<img src="jqueryslideshow/10_Ellington_after_2.jpg" alt="Slideshow Image 2" width="450" height="433" />
<img src="jqueryslideshow/11_fireplace.jpg" alt="Slideshow Image 3" width="450" height="433" />
<img src="jqueryslideshow/12_garage_start.jpg" alt="Slideshow Image 4" width="450" height="433" />
<img src="jqueryslideshow/13_garage_b4.jpg" alt="Slideshow Image 4" width="450" height="433" />
<img src="jqueryslideshow/14_garage_after.jpg" alt="Slideshow Image 4" width="450" height="433" />
</a>
</div>
Flexslider would need something like:
<div id="slideshow" class="pics flexslider">
<ul class="slides">
<li><img src="jqueryslideshow/1_add_1.jpg" alt="Slideshow Image 1" width="450" height="433" /></li>
<li><img src="jqueryslideshow/2_add_2.jpg" alt="Slideshow Image 2" width="450" height="433" /></li>
<li><img src="jqueryslideshow/3_add_3.jpg" alt="Slideshow Image 3" width="450" height="433" /></li>
<li><img src="jqueryslideshow/4_dealer_b4_1.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
<li><img src="jqueryslideshow/5_dealer_b4_2.jpg" alt="Slideshow Image 1" width="450" height="433" /></li>
<li><img src="jqueryslideshow/6_dealer_b4_3.jpg" alt="Slideshow Image 2" width="450" height="433" /></li>
<li><img src="jqueryslideshow/7_Ellington_b4_1.jpg" alt="Slideshow Image 3" width="450" height="433" /></li>
<li><img src="jqueryslideshow/8_Ellington_b4_2.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
<li><img src="jqueryslideshow/9_Ellington_after_1.jpg" alt="Slideshow Image 1" width="450" height="433" /></li>
<li><img src="jqueryslideshow/10_Ellington_after_2.jpg" alt="Slideshow Image 2" width="450" height="433" /></li>
<li><img src="jqueryslideshow/11_fireplace.jpg" alt="Slideshow Image 3" width="450" height="433" /></li>
<li><img src="jqueryslideshow/12_garage_start.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
<li><img src="jqueryslideshow/13_garage_b4.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
<li><img src="jqueryslideshow/14_garage_after.jpg" alt="Slideshow Image 4" width="450" height="433" /></li>
</ul>
</div>
Marc Nevue
Registered User
324 posts
Hmm, here is what I managed for code, but all this does is list the pictures vertically with a small dot next to each one. now, I tried your result above (JamesD) and here is the link to what I got.... http://test.dtscarpentry.com/
<img src="jqueryslideshow/2_add_2.jpg" />
</li>
<li>
<img src="jqueryslideshow/3_add_3.jpg" />
</li>
<li>
<img src="jqueryslideshow/4_dealer_b4_1.jpg" />
</li>
<li>
<img src="jqueryslideshow/5_dealer_b4_2.jpg" />
</li>
<li>
<img src="jqueryslideshow/6_dealer_b4_3.jpg" />
</li>
<li>
<img src="jqueryslideshow/7_Ellington_b4_1.jpg" />
</li>
<li>
<img src="jqueryslideshow/8_Ellington_b4_2.jpg" />
</li>
<li>
<img src="jqueryslideshow/9_Ellington_after_1.jpg" />
</li>
<li>
<img src="jqueryslideshow/10_Ellington_afer_2.jpg" />
</li>
<li>
<img src="jqueryslideshow/11_fireplace.jpg" />
</li>
<li>
<img src="jqueryslideshow/12_garage_start.jpg" />
</li>
<li>
<img src="jqueryslideshow/13_garage_b4.jpg" />
</li>
<li>
<img src="jqueryslideshow/14_garage_after.jpg" />
</li>
</ul>
</div>
<img src="jqueryslideshow/2_add_2.jpg" />
</li>
<li>
<img src="jqueryslideshow/3_add_3.jpg" />
</li>
<li>
<img src="jqueryslideshow/4_dealer_b4_1.jpg" />
</li>
<li>
<img src="jqueryslideshow/5_dealer_b4_2.jpg" />
</li>
<li>
<img src="jqueryslideshow/6_dealer_b4_3.jpg" />
</li>
<li>
<img src="jqueryslideshow/7_Ellington_b4_1.jpg" />
</li>
<li>
<img src="jqueryslideshow/8_Ellington_b4_2.jpg" />
</li>
<li>
<img src="jqueryslideshow/9_Ellington_after_1.jpg" />
</li>
<li>
<img src="jqueryslideshow/10_Ellington_afer_2.jpg" />
</li>
<li>
<img src="jqueryslideshow/11_fireplace.jpg" />
</li>
<li>
<img src="jqueryslideshow/12_garage_start.jpg" />
</li>
<li>
<img src="jqueryslideshow/13_garage_b4.jpg" />
</li>
<li>
<img src="jqueryslideshow/14_garage_after.jpg" />
</li>
</ul>
</div>
JamesD
Registered User
55 posts
Hi Marc,
Just took a look and I don't see jQuery being included/loaded. That seems to be the main error right now.
Make sure jQuery is being added prior to the flexslider include.
Just took a look and I don't see jQuery being included/loaded. That seems to be the main error right now.
Make sure jQuery is being added prior to the flexslider include.
Marc Nevue
Registered User
324 posts
Obviously, I am not a code person. One the outside this stuff is intimidating and seems complex, but when you dig into it, it is not too bad. There are way too many ways to goof it up tho.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
