I have installed "Easy Nivo Slider" plugin for WordPress in order to show a slideshow in the heading of the site I'm working on and it seems that the plugin generates things like thumbnail navigation and etc inside the IMG tag with javascript. I have never seen this method before and all the changes (margins, paddings) have no effect even close to what I'd like to get. Basically, what I want is to have a slider with a title and description place and thumbnail navigation (whereas the thumbnail is not the smaller image of it, but another one, custom one, defined in a post's custom fields (I think I can do that myself). All I need is to be able to use CSS however I want it to, because right now the only function that actually responded was the font-size.
You can see the half-done site live at http://work.codera.in/re to get a look at the code and to get a glimpse of how I want to be able to modify it in the end result is here: https://minus.com/lbyerG4OncvwdZ
Why don't you try http://wordpress.org/extend/plugins/simple-nivo-slider/ or http://wordpress.org/extend/plugins/wp-nivo-slider/ . From what i can see here wordpress.org/extend/plugins/easy-nivo-slider/ easy nivo plugin appears to be broken.
Related
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.
So basically, I made a simple website.
I am using bootstrap along with masonry jquery and google maps.
This is the basic page of my website.
How this website works is like when gallery is click, index page will fadeout and gallery page is faded in.
Lets go straight to the point which is my CSS. I am wondering what is wrong with it since I am encountering this problem.
My masonry images for gallery will overlap each other but if I place things out of the division class section. Everything is fine. Same goes for the google map width problem.
Things will only be ok after the window is resized manually.
Here are the SS for the problems
my entire css link
http://pastebin.com/kqWaszqF
my custom js link
http://pastebin.com/uqSvaMeT
my index page link
http://pastebin.com/eKHyJV95
As you can see, if I place all this codes for gallery and map outside of everything will be working fine and great but if I put it inside of that . This the above problem happens.
I tried everything like min-width: 100%, width: 100% or whatsoever. Seems like this problem always exist. Even if I setTimeOut to my javascript for masonry and googlemap, it works sometimes but not perfect as it also fails.
Can some kind soul please help me out here?
You need to provide a fiddle with html so i can test it in order to help you.
I would like to integrate some of fancybox's features into galleriffic. Basically I want to have a gallery of images with their respective thumbnails using galleriffic. Besides the styles my approach looks very similar to: http://www.twospy.com/galleriffic/example-2.html
Additionally, I want to be able to zoom into the image being shown. For such prupose I am using fancybox. An example of its behaviour can be found here http://fancyapps.com/fancybox/demo/
I have managed to make what I described above slightly modifying the galleriffic buildImage function leaving it as follows:
.append('<span class="image-wrapper current"><a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'"> </a></span>')
Now, galleriffic adds the fancybox class fancybox needs as well as the image source. This works wonderfully.
At this point I find a problem I don't seem to find a neat solution for. Fancybox allows to navigate through a collection of images by clicking on the right/left side of each image to go to the next/previous image in the collection (as you may have noticed in the demo provided above). I would like to make use of this feature as well, so that users can navigate through the gallery by navigating through galleriffic's thumbnails, as well as through a zoomed version of the images using fancybox.
The problem I find here is that galleriffic creates the a class="fancybox" only for the image whose thumbnail has been clicked. This makes that fancybox is only able to find one image of the gallery. I don't want to define the class fancybox to the 's that define the thumbs for galleriffic because i dont want the images to be zoomed when clicked on the thumbnail but on the main image.
In a way, what i need is to generate all the 's with the fancybox class but hide all the not shown, instead of generating each time the one I need via galleriffic. This is the only solution I can come up with but it is not neat. I like how galleriffic deals with generating the main image each time the thumbnail is clicked.
I am wondering if someone can come up with a nicer solution. For example, fancybox could be able to know which image comes next by searching in the next galleriffic thumbnail's .
I have tried to make a working jsfiddle demo but there's too much code involved. Also there is no definite problem but a conclict of implementations. I think you can replicate my current situation easily.
Thanks for the effort!
I tried your method above, editing the BuildImage function as you did. For me, it successfully links to the image, but does not load in FancyBox.
I have this code in the main file:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
You were successful combining the two, correct?
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
I am using jQuery Isotope for my personal website:
http://www.ryanpays.com
The issues i am facing are when a user clicks either 'Websites' or 'HTML-Email' after the page has loaded there is no animation of the project thumbnails when filtering. However, they do animate when either link is clicked again.
Also i would like to preserve the layout of the 'Clients and projects' section after the animation. It seems to break onto a new row/s when there should be enough room for the last child to be positioned on the first row. When 'show all' is clicked it does not return to the original layout either. I am unsure if there is something i need to do in the CSS to achieve this or maybe re-structure my HTML.
Update
I have worked around this issue by initialising isotope on page load and then again on click. Doesn't look right in IE6 (can live with that for now) and is not really the functionality i would ideally like to achieve.
You need to set your #UL to #UL.isotope because it is adding that class on click, and it needs to already be applied for the css3 animations to work. Just had this issue today, www.mactyler.net you can see it working.