PDA

View Full Version : recommendations for slides


mustangdesigner
03-02-2014, 05:25 AM
Any recommendations for slide viewer compatible with Mac Dreamweaver? Or would it be possible/advisable to just build one in iPhoto or iMovie?

Ricky55
03-27-2014, 10:52 PM
Using a forum is a two way process, if you put little effort into your question you're likely to get ignored.

What do you mean by slide viewer?

If you mean like a gallery of photos, just search Google for jquery slider all will work with DW Mac as this has no bearing on it.

If you mean slides as in a presentation then this is a different thing.

mustangdesigner
04-03-2014, 04:16 AM
I am sorry. I did not realize my question was too vague. I have a client with several photos and I would like to organize them into an automated slide show on their website. I am wondering if there is a preferred software out there that people have had good experience with such as WOW slider, or if building a slide show in iPhoto is sufficient.

edbr
04-03-2014, 05:48 AM
prefered could be a personal choise or the one best suitewd to how you want to display. wow,dual slider, many responsive sliders, some are easier to re code to select from data from databases than others . and of course how they fit with your own design.
really so much choice and are usually so easy to implement, just pick a few and try them out

edbr
04-03-2014, 06:00 AM
http://designscrazed.com/free-responsive-jquery-image-sliders/

Ricky55
04-04-2014, 04:33 AM
My slider of choice at the moment is flex slider 2.

http://flexslider.woothemes.com

Very easy to setup, it's responsive and is light weight doesn't load a crap load of CSS and JS to work.

I used to use slides.js but since the RWD I've come away from it although I believe it has been updated since I first used it.

mustangdesigner
04-04-2014, 05:15 AM
Thank for the advice! The list was very helpful as a basic comparison. I will give the free ones a try and will definitely give flex slider a try.

Ricky55
04-04-2014, 07:35 AM
Flex slider is free, 99% of things like this are.

mustangdesigner
04-29-2014, 05:08 PM
I am using flex slider and it seems pretty straight forward. However, can they be used within an html template? I am not sure about the placement of the first group of code. Also, is there any way to adjust the size (width) of the slider? I would like it to run to the right of other copy.
Here's a link to take a peek at what's going on so far.

http://www.kinggraphics.net/wellspringmissions.org/index.html

Ricky55
04-29-2014, 08:46 PM
Do you mean a Dreamweaver template? if you do then yes you can. What do you mean by the first group of code? please list it.

Of course you can adjust the width of the slider. You can do this by either making the images the size you want or by using CSS.

You would then just float the whole thing to the right of your copy.

Come back if you need any further assistance.

BTW, don't put CSS in your template or in the head of your document. That amount of CSS belongs in its own style sheet.

If you are referring to


<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>


This should appear just before the close of the </body>

You also don't need a charset on a script tag.

Ricky55
04-29-2014, 08:49 PM
One other thing

This


<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>


Should all appear after the opening of the <head> not before it.

Finally


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>


Would again be better inserted before the close of the </body> just have it before the call to flex slider.

Ricky55
04-29-2014, 08:50 PM
So it be clear, the end of your document would look like this:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</body>
</html>

mustangdesigner
05-01-2014, 04:26 PM
Ok. So I have had some success in getting this set up. The issue now is that the navigation dots are showing up at the bottom of the page in a vertical line, not under the images. Also, I am not sure why that when the page loads it begins by showing half of slide 2 and 3. Here's the link to what is happening.

http://www.kinggraphics.net/wellspringmissions.org/index.html

Ricky55
05-01-2014, 08:58 PM
You're lucky I was bored tonight, see files here:

https://dl.dropboxusercontent.com/u/508261/DWClub.zip

My CSS I've added underneath yours so you can see it, labelled Richards.

Your images need to be cropped as I have done in the example. For a fixed width design I would also leave them all landscape.

Don't use align on elements always use CSS.

I've only used four images here to show you.

Cheers

Richard

mustangdesigner
05-05-2014, 04:37 AM
Thanks for this! I will have to study it a bit to see exactly what you have done--basically teaching myself CSS. I do realize that the horizontal pictures work better but I had to use what the client provided. The uncropped areas were actually added to give each file a uniform slide size regardless of original photo orientation. Thanks, again! I'll start studying!

Ricky55
05-05-2014, 09:50 AM
You do need to learn if you are doing this for clients.

Padding images with empty pixels isn't the way around this. You'd be far better explaining to the client that landscape images will work best.

If they must use portrait either do a tighter crop to make it landscape or add the white space to this not the landscape shots.

Come back if you need any more help.

mustangdesigner
05-07-2014, 08:59 PM
I must be missing something. Just messing around testing your code I run into the same issue every time I apply my template, whether adding my template to your example or pasting your code into my page built from a template. In both cases the navigation dots end up in a vertical line along the left edge of the page below the slide show. Ideas?

Ricky55
05-07-2014, 09:53 PM
I know it sounds obvious but have you copied the CSS as well as the HTML?

The navigation dots are called pagination and they will just stack up as they are made from an HTML list. You simply use CSS to style these to make them look and position them as you want. Its the same with the arrows.

One of the things I noticed was that you had chosen not to link up the CSS file that comes with the flexslider. If you do hook this up it takes care of a lot of these styles for you.

I actually prefer to write my own but it might be easier for you to hook this up. The file is called flexslider.css

You do this in the head of your document.


<link rel="stylesheet" type="text/css" href="path-to-file/flexslider.css" />

/*You can omit the type attribute if you are using the HTML5 doctype*/


Cheers