I would like to make a news portal, where next to the post excerpts there will be an image. When you click on the image, the title or the post excerpt , the whole content will be shown (accordion / toggle effect), resizing automatically, in the responsive way, the assigned picture. How to do that on any drupal theme? Example – news.google.com
Graphic explanation: http://imgur.com/a/eBfjU
Maybe there is an extension / module or template that allows for a simple adaptation of such a solution? I know there are accordion plugins, but I do not know how to apply them to the images auto-expand on-click along with content.
Thank you!
This is more front-end than drupal question.
And "how" - you have to make your own theme by inheriting some other (if you don't want to start from scratch).
Then, you have what will that your page be? Node in some new content type or a view or something else.
Then, find some documentation/tutorial how to theme that kind of page.
You must have some deeper understanding how the drupal works before going to real work.
Related
to be clear, I want to add a hamburger menu in an HTML web app that will open a menu screen when clicked. I want the menu to animate from the corner of the screen (where the menu button is located). I would like to accomplish this using HTML, CSS, or javascript because those are the languages I'm currently studying. If someone could recommend a beginner-friendly method to accomplish the above-stated goal, I would be extremely grateful. Thank you for your time.
To add on to #Paul's answer - definitely use Bootstrap, and if you are going to use Bootstrap, don't forget to link the Bootstrap library to your HTML file in your header and reference jquery and javascript near the end of your code. More complete instructions can be found here: http://getbootstrap.com/docs/4.0/getting-started/introduction/
If you are looking for an easy way to do it, I would reccomend Bootstrap as it is a great resource and CSS framework for creating lots of components. I suggest looking at its dropdowns library for creating a hamburger menu.
Cheers.
In the showcase section of this page (featured projects area), I am trying to link each photo to a dedicated page, instead of going into the JQuery light box.
Is there a way to achieve this without breaking the fade up animations and the dark overlays already present before clicking? Totally okay with scrapping the lightbox feature if neccessary, but not sure what to delete in fear of breaking the design and function.
This is a template that I have already customized with html and css. The linking to a page is the only issue I can't figure out (I'm a newby to JavaScript).
Any input would be much appreciated.
The entire site is downloadable with the style and JavaScript files for you to tinker with.
Thanks in advance,
I'm having some trouble figuring out how to modify my gallery which runs on JS Colorbox on Shopify.
My storefront link is http://chillonbroadway-2.myshopify.com/
The major problem I'm having with the gallery is whenever I make the width bigger than the default, the images inside the gallery begin to shift out of focus beginning with the 2nd slider image. I'm convinced it's something with the javascript, I'm a beginner with the language and only know how to modify jqueries or premade scripts.
Please help!
Thanks!
I am not a UI developer I normally stay on the backend of things, but I am trying to figure out how to build a simple banner to my site just like how amazon has done. I really like the look and feel to. I assume that comes from CSS side.
I have attached a image from amazon website. On amazon site user can click each "Menu" on the bar and respective banner will nicely show with a slide effect. I have select kindle here and you can click any other option on live site to see exactly what I am referring to. I am not sure where would be a good starting point.
There are tons of jquery plugins that do just this - http://vandelaydesign.com/blog/web-development/jquery-slideshow/. However, here's a little one I just built for fun:
http://jsfiddle.net/joplomacedo/GLmed/
It's only got the basics. You click a link and it slides. For that the css and jquery are just a few lines long. I guess it should be easy to customize.
I am currently developing a site and have a need for a javascript-based carousel/slider hybrid on the home page that fades between 3 or 4 different images automatically, giving the user the chance to click on one and go to another page on the site. I also need the different slides to have some sort of navigation, denoted either by names for each slide (like in the Coda slider effect) or by symbols (such as dots for each slide), to allow users to review their options before clicking on the slide to visit the particular highlighted section.
I have seen this done in many ways with flash , but the only javascript approach I have seen that meets my needs is the one used by Apple on the new iLife page (link). Does anyone have any ideas what they are using or if there is a project that is similar to their implementation?
Thanks in advance.
Unless I'm missing something, the navigation on iLife looks like a photo gallery where the large photo links to the destination. I've used the jQuery Galleria for photo galleries because the animation effects are superb. Also the forum provides helpful community-based support.
If you wanted a carousel-style animation with the images sliding left and right, might try the jQuery Carousel library. I have not used it myself though so cannot comment on its ease-of-use or quality.
jQuery animate or jCarousel
The YUI Carousel Control would be another starting point to have a look at. (Note as of writing it is currently in beta.)
Hey I am not sure how helpful this will be but check out this slider. It is super simple and has the navigation thumbnails i think you are looking for
http://codetutorial.caroshaw.com/jquery_image_slider.php