Viewing New Image Slider
New Image Slider
|
User: Roddy 12 years ago
|
|
|
It appears that I don't get notified about new messages in my inbox in the new forum setup. This prompted me to figure out how to actually get to it now and saw the alarming number of unanswered ones in the forum navigation! ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 12 years ago
|
|
|
@ Christopher This is kind of a reply to your latest PM. I am doing it in the forum because other wannabe rocket surgeon/brain scientists may benefit from some of this. If you don't need any data attributes in the HTL for info, captions and hyperlinks, you can use the EverWeb widget to save your valuable time. I suppose, as a beginner level RS, you didn't take note of the fact that EW uses minimal internal CSS for the slider. There is no need for you to use overwrite code in the Head because you publish to a folder - don't you? This means that you can open both the galleria.classic.css and the galleria.classic.min.js and modify them to your heart's content without any fear of EW overwriting them. Here's MY SLIDER using the EW widget. Note how the thumbs all fit the width of the carousel and have no opacity. The thumbnail container now has a border with rounded corners. The thumbs also have a rounded corner border and this border changes color on mouseover. I didn't actually adjust the size of my thumbs - I changed the right margin to adjust spacing and the top margin to center them vertically in the carousel in this line... .galleria-thumbnails .galleria-image { margin: 3px 4px 0 0;} To make it more easy to understand I will use the long way of expressing margin... .galleria-thumbnails .galleria-image { margin-top: 3px; margin-right: 4px; margin-bottom: 0; margin_left: 0;} Here's the full CSS for that class... .galleria-thumbnails .galleria-image { height: 40px; width: 60px; background: #000; margin: 3px 4px 0 0; /* adjust both top and right margins */ border: 2px solid #aaa; border-radius: 5px; float: left; cursor: pointer; } Note how I added a colored border with a radius. I then added this just below the above code in the CSS file... .galleria-thumbnails:hover .galleria-image:hover { /* thumbnail hover */ border: 2px solid #157FFF; } This changes the color of the border on mouseover. The reason that you couldn't change the opacity is that it is in the galleria.classic.min.js - not the css file! It appears that I can't attach a file to a PM so, if you will PM me with a real email address, I will send you a copy of both the CSS and JS modified files. This should make your journey on the road to RS/BS a lot easier. Once you have mastered this, I expect you to answer all forum questions about modifying this slider. Then you can move on to creating some more themes! ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 12 years ago
|
|
|
I have started customizing a theme. It is kind of rough around the edges and I need to figure out the best way to import the folder into EW and overwrite the existing CSS and javascript. The idea is that you can generate your slideshow using the widget and then switch to another theme which is in a folder dragged into ewExternalFiles. Hopefully, this would then work for those publishing to the EW Server since the customization method outlined in my previous post can only be used by those publishing to a folder. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 12 years ago
|
|
|
Hey Roddy, Thanks for the info. It should help other brain surgeons towards their goal of victory. I'm a little indecisive sometimes. After spending hours yesterday trying to get things to work with the image slider, not realizing it was the js I needed to be customizing!, I decided to settle on the Shadowbox gallery viewer. I can see now how the slider is better suited for certain things, while a gallery with all thumbs visible is suitable for others. I did, however, steal (borrow) some of the code you provided to customize my Shadowbox css. When I inserted code to add a border during hover, and it actually worked, I think I might have yelped. Success is fleeting for us newbie coders you know. One thing I noticed with your customized slider. First off, swiping gestures work great on an iphone, if not a little slow for my taste. But it doesn't centre and properly resize when you turn your phone to landscape mode. Shadowbox does. I'm sure it's an easy fix for a genius like you. Here's what I mean. Image slider responsive on iPhone: (Hmm. I didn't upload my photos. And I can't try again with edit. O-kay.) Last edit 12 years ago ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 12 years ago
|
|
|
I have two customized sliders. I take it you mean the second one? It was created very quickly and I did say it was rough. I think the problem may be with the fullscreen mode but I'm not sure. One thing you should note about the EW created version of the Galleria slider is that, although it has swipe set to "true" by default, it isn't actually responsive. The Galleria_0 div has a fixed size set in the internal styles in the page head code. If I were the developer, I would have used the responsive method where the stage is 100% width and the height is set using a ratio. The user would then just fine tune the size using the div created by the snippet. That's how I used to do it in iWeb but nobody else seemed to grasp the advantages of this - probably because they didn't know the basics of responsive design. You can experiment with this yourself by overwriting the setup javascript in the footer code box... <script> Galleria.run('#galleria_0', { height: 0.6 }); </script> Adjust the proportions of the Galleria Stage using "height" ratio. To get this ratio, divide the desired height by the desired width - both in px - and then multiply by 100. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 12 years ago
|
|
|
I have two customized sliders. I take it you mean the second one? It was created very quickly and I did say it was rough. I think the problem may be with the fullscreen mode but I'm not sure. One thing you should note about the EW created version of the Galleria slider is that, although it has swipe set to "true" by default, it isn't actually responsive. The Galleria_0 div has a fixed size set in the internal styles in the page head code. If I were the developer, I would have used the responsive method where the stage is 100% width and the height is set using a ratio. The user would then just fine tune the size using the div created by the snippet. That's how I used to do it in iWeb but nobody else seemed to grasp the advantages of this - probably because they didn't know the basics of responsive design. You can experiment with this yourself by overwriting the setup javascript in the footer code box... <script> Galleria.run('#galleria_0', { height: 0.6 }); </script> Adjust the proportions of the Galleria Stage using "height" ratio. To get this ratio, divide the desired height by the desired width - both in px - and then multiply by 100. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Ms M. 12 years ago
|
|
|
Hey there! I would like to have the background of my slider (image + carousel) transparent instead of a color from the color picker. Right now I have a "Page" background with pattern and it doesn't look so well! As for now I am always checking the coding, that I put in the footer area for that, through the safari preview. ....Which is because I am still waiting to purchase until the blog arrives... Thanks for helping me guys! ~Miri Last edit 12 years ago ------------------------------- ♥︎ Everweb ♥︎ ---------------------- www.miridoro.com |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
Hi Miri, You can't make the background transparent currently. However you can set it to the same background color as your page. Have you tried that? ------------------------------- Paul EverWeb Developer |
|
|
User: Ms M. 12 years ago
|
|
|
Thanks Paul! >> I didn't think of that at all! I will try it out right now... I see you are a developer (!) Do you, by any chance, know when the blog-option-update comes? ------------------------------- ♥︎ Everweb ♥︎ ---------------------- www.miridoro.com |
|
|
User: Steve 12 years ago
|
|
|
One way I've gotten around this is to take a screen shot "shift cmd 4" of the approx size of the slider background that's showing, normally left & right of the photos, then placing the over the white wings of the slider... The one catch is, all the photos need to be the same size, so they won't be cropped by the clips of the background that you used to cover the slider background wings.... Hope this helps! Steve [quote name=Ms M. time=21/12/2013 22:31:39]Hey there! I would like to have the background of my slider (image + carousel) transparent instead of a color from the color picker. Right now I have a "Page" background with pattern and it doesn't look so well! As for now I am always checking the coding, that I put in the footer area for that, through the safari preview. ....Which is because I am still waiting to purchase until the blog arrives... Thanks for helping me guys! ~Miri ------------------------------- MacBook Pro 15in Retina 10.14.6 Nevada, U.S.A Apple since OS 7.1 LE II (pizza box) |
|
|
User: Ms M. 12 years ago
|
|
|
Cool! Thank you Steve. I will see if that works for my pattern backgrounds.
------------------------------- ♥︎ Everweb ♥︎ ---------------------- www.miridoro.com |
|
|
User: Roddy 12 years ago
|
|
|
You can use CSS to achieve this. Paste this code into the Head Code box in the page inspector… <style type="text/css">#galleria_0 {background:none}</style> Note the ID number which, in the above case, is 0 - #galleria_0 - since this is the first instance of the slider. If this is the second time you have used the slider widget the ID number will be #galleria_1 and so on. Last edit 12 years ago ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: . 12 years ago
|
|
|
Hi Guys, As a newbie to all this, I hope i can find some help on here.... I have made a website in Everweb and am FTP-ing it via Filezilla to 1and1 hosting. I've used the Image slider widget and it looks great when it is published to file. However, when published to the web, all the images are massive and appear as a long scroll. Am I doing something wrong, or is this a glitch that needs ironing out? Thanks, |
|
|
User: Roddy 12 years ago
|
|
|
Can you post the URL to the published page?
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: . 12 years ago
|
|
|
Quote: Roddy - 11/01/2014 12:08:00 Can you post the URL to the published page? Roddy, The url is as follows: http://www.grahambowentriumph.co.uk/testimonials.html I only published today to have a look at the progress made. If you're able to have a look and provide a pointer or two I'd be very grateful. Cheers |
|
| Post Reply |
| You must login or signup to post. |