I have been asked to build a portfolio website for a photographer. The main page contains a slideshow of the photographer's best work, I have used an autoplaying NextGEN SmoothGallery with Lytebox. After some customization of the plugin, this works.
However, the client has requested a category selection above the main slideshow and a scrollbar below the image. They also want part of the previous and next images to be visible, not just the image in focus. The image here illustrates what I mean.
I have searched and searched, but cannot find a plugin that would do this. Can anybody help, please?
The trouble is, I doubt there is a plugin around that would do this, and it's really not going to be a case of "here's the code to do that, just drop it in and you're flying".
If it were me, I'd probably write the whole thing myself, because if I'm honest, I've never used the NextGEN SmoothGallery plugin, and wouldn't want to root around all the code when I've got a simple idea myself;
A bit of PHP that outputs the list of categories, and then an unordered list of the X most recent items, one list for each category.
Then I'd use jQuery (and probably the jCarousel plugin) to create the slideshow for a single list, and add click handlers to the category links which simply 'swap in' the correct list into the current carousel.
Finish the whole thing off with some CSS.
Does any of that sound like something you'd be familiar with?
Related
I am a writer and I have menu for my chapters list on my website of 30+ chapters and currently it annoyingly looks like this:
current website
As you can see it cuts off, and Wordpress annoyingly doesn't have a feature that turns it automatically scrollable. There are 30+ chapters and you have to keep scrolling, scrolling, scrolling down to see them all.
I have found some good looking solutions on StackOverflow but don't know where and how to apply them on Wordpress.
If anyone could talk me through literally step-by-step 1. where to find the CSS of my Wordpress site 2. the code I'll need 3. where to paste it 4. if there's anything I need to add to the navigation block's inidividual "Additional CSS Classes" part like so: Additional box in the corner and anything else I need to do. I would be super grateful!
One of my fears is just dumping a bit of code somewhere in the middle of editable CSS and screwing up my entire site! My CSS knowledge is super beginner so laymans terms is very much appreciated thanks :)
I tried using Plugins (those seem even more confusing than CSS) and have considered using Elementor too but I have Googled and YouTubed, trying to find a solution and nowhere has something as specific as what I'm looking to achieve frustratingly.
I tried following this youtube video: https://www.youtube.com/watch?v=73XjO7hFZaw but didn't know what my "Target Element Selector" was, even when I went into Inspect on Chrome, all I found was this
I'm trying to do the layout of a course on masterstudy in wordpress, but I'd like to make a template for certain parts of the course, lets say for example when I hover over the title, show an image, when I click on a paragraph, make another one appear next to it etc... I think it is possible to have shortcuts for these and not have to copy paste the code each time I want to have these effects. I think this icon(see image) might do the trick (not sure) but I can't seem to save a template in my dashboard. So if it is indeed this button, can you please explain me how to save templates, and if it is not the solution can you explain me where to look ? The screenshot shows the Tiny MCE editor
Thanks screenshot
Although this question is specific to Floatbox (http://floatboxjs.com/demo), this issue would be generic to most image gallery light-boxes.
I need Floatbox to be able to show my image galleries per Isotope's reordering of page elements; e.g. div - thumbs. For what Isotope does please see http://isotope.metafizzy.co/demos/sorting.html .
The problem is that plugins, like Floatbox, get their page order of elements (thumbnails) off of the initial div's on the page. From what I can understand of Isotope, it doesn't actually rewrite the HTML to allow scripts like Floatbox to the read/parse the new order of displayed thumbnails.
I only have a very black box understanding of jQuery so I suppose I am asking if there is a way to rewrite the page such that scripts like Floatbox can then be called to parse them in Isotopes new 'displayed' order.
I have hunted everywhere for a solution, but I cannot even find much in the way of anyone asking this question. That seems odd as this affects everyone who uses a Masonry/Isotope and lightbox combo ~ being able to advance via a lightbox in the newly sorted order instead of the original page order.
For what it's worth, the site with the galleries I am working on is leo labelle dot com.
PS - I posted a similar question to the creator of Floatbox and unfortunately his best solution was to rewrite the pages in each possible order . . . yikes!!!!
Regardless of a solution - A huge thanks for any suggestions!
I am using the premium responsive theme in Drupal 7 to create a site. In the theme the front page has a slideshow on it. Is it possible to make the slideshow appear on the top of every page?
EDIT
So I was messing around with this a little more and I tried bringing the code into page.tpl.php so that it would appear on all pages, but nothing happened. I then tried doing it on the maintenance.tpl.php page, and still nothing happened. Any ideas out there?
It seems like we're working on a similar problem, but since you helped answer my question I thought I'd help you out. In the templates folder you have to create a new page--front.tpl.php (which I'm sure you have), and put it the code from this website:
Go Here
This will make your front-page unique, and you can copy the similar code to your page.tpl to make changes to the remaining nodes.
I'm trying to display all node_edit form neatly within a lightbox without any of the excess content I don't want. No sidebars, footer, header, nothing. Just the content. So I created a page-node-edit.tpl.php file.
I have two problems daunting me, but for now I'll only mention the first since its more important.
1) From any drupal page, clicking on the "edit" link for the node doesn't activate the lightbox like it should. Instead it clicks-thru the link as normal.
With jQuery in the header I added a rel attribute for the lightbox to the links, but the box still doesn't activate. I tested the lightbox on a link I hardcoded into the page, and it activated just fine. For elements generated by Drupal, like the node edit link/button the problem seems to be timing.
I think the rel attribute needs to be built with the page, with the link, rather than appended onto it. The catch is, the link lacks an id and class, so I don't see how the hook_alter_link() function can help me.
I'm willing to try anything. Perhaps someone has done this before? Opened a node/edit form within a lightbox.
Any suggestions would be greatly appreciated.
I've seen the Modal Frame API used in a few modules (Node Relationships uses it to do something very similar to what you're doing); might be helpful...
http://drupal.org/project/modalframe