do you know if its possible to have the pint it mouse over on a single image? right now I use this:
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async data-pin-hover="true"
src="//assets.pinterest.com/js/pinit.js"></script>
But that is placing a pint it on every image on that page, I just have 3 or 4 images that needs the hover action, not all the whole images in that page, any idea guys?
Thanks!
From looking at the pinterest documentation, I think by default it wants to put a pinit button on everything. So to exclude images, you have to add the exclude specifically on every image for which you do not want the image to appear:
data-pin-no-hover="true"
https://developers.pinterest.com/on_hover_pin_it_buttons/
With JQuery I just did the following since I set the following pinterest attribute on all the images I wanted the save button to show up on...
//remove Pinterest save button for all images
$("img").attr("data-pin-no-hover", true);
//add it back to images for which I've defined the pinterest image
$("img[data-pin-media]").removeAttr("data-pin-no-hover");
Related
I have an image gallery in wordpress and I would like to filter the images based on say colour and style similar to the website
Someone please pint me in the right direction or a plugin that can do this?
Thanks
You can try gallery bank plugin.
In the settings enable the filter by tag (way at the bottom), and then add the desired tags to the images. (i.e. red, bold, retro). You can add as many tags as you want.
The image gallery will display all tags for all images (in thumbnail view)
When you click them, the images will re-sort (based on the tag clicked) without the page reloading.
You can manipulate the data-filter attribute of the # link in the includes_before php file. This link drives the sorting behavior.
I am looking to have an embedded youtube video with several images below it that correspond to different youtube videos. I want to set it up so that when an image is clicked on, the video above changes to whichever video corresponds with the clicked image. An implementation of this can be seen here: http://www.seanhayesmusic.com/2012/media/
I am trying to implement this into a wordpress site and I really only have skill in HTML and CSS. I would very greatly appreciate if someone could help me with the code for this!
Just look at the source. it's just html. He's got the youtube video in an iframe, and there's an <a> tag around the thumbnails with target= attribute making the link change the iframe.
Alternatively, you could actually embed the video on the page, and use javascript (and jquery if you want it to be easier) to alter the embed code when you click on the thumbnails. This method would probably be better and easier.
Go to the youtube page for each video, click "share" then "embed" and copy the html.
While you're there, take a screenshot. Crop/resize to make the video thumbnail.
For the default video (the one that plays/shows before you click thumbnail) paste in the full embed code (from step 1) into your page. add this to the <iframe> tag: id="video_player"
For the other videos, put your thumbnail image on your page as normal, then add a <a> tag around the image like this: <a href="#" onclick="$('#video_player').attr('src', 'http://www.youtube.com/embed/paPT5qxM9m0'); return false"> (except of course you need to fix the url, with the one in the embed code for that video
If you don't already have it, source jquery into your page. That means adding something like the following to your <head> tag: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
I'm working on a Joomla website with a slider in it. I'm using {loadposition slider1}, to get the slider (slider 1) in an article. There is a text link beneath the slider. Now I'd like the page to load another slider (slider 2), in the position of slider 1 when someone hovers over the text link. So visitors hovering the link will see slider 2 in stead of slider 1 when hovering the link.
Can I do this by using javascript? I haven't been able to find a solution. I hope someone can help me with this problem. Thanks in advance.
In Joomla! the {loadposition slider1} tag in articles is processed by a content plug-in when an event is triggered. Usually onContentPrepare or similar event. The important part of this is that it's all done on the server before it reaches the users browser.
As it's processed in the article there is no way to call the server again and request just slider 2...
To swap in your slider2 would require the browser to already have it available. To achieve this you could have {loadposition slider2} in a <div> or other element in the article that is set to display:none. eg.
<div id="slider2" style="display:none;">{loadposition slider2}</div>
NB. this is not necessarily good html...
This means when the browser receives the article html, it contains the element it's just hidden, then you can use the your javascript to hide slider1 and show slider2 when the user hovers over the link.
I am using Joomla and Seblod. I would like to create a gallery of thumbnails only, tiled next to one another and when clicked it will open each image into a lightbox (fancybox) and display larger image and description.
Problem I'm having is that when I try to display only the image thumbnails, I get the label "Image" or whatever I enter into Seblod. I just want plain image thumbnails, no text or any description but when clicked it opens them in the lightbox. I'm sure this is child's play, but confusing for a a beginning Joomla user like myself.
Any help would be appreciated, thanks.
There is built-in Lightbox functionality in Seblod, but it takes a few steps to make it work. It is even better if you use a custom template, because then you can add regular PHP functions to process your photos.
In any case, to get started, look at the tutorial I wrote on this subject: http://www.seblod.com/support/documentation/seblod-2x/fields/typo/1710-create-a-simple-gallery-with-fieldx-field.html
i need a jquery plugin where i want to load the module by default as HTML and upon clicking more link it should load the rest of the content via AJAX and then previous button should be enabled.
Currently when i google i can get lot of plugin which just load either via AJAX or Animation [by hidding the rest of the content]. But for performance issue i don't want to load all the content at one shot and then animation. So i want to load the 5 li's and upon clickiing "More" it should start loading the remaining content but it should also animation.
Could someone help me on this?
-- Bala
My advice to you would be to customize the jCarousel according to your needs. Specifically, when you render the page initially you can include the initial 5 elements of your carousel. Then, in the carousel's onchange event, once you reach the last slide you can use AJAX to pull in the additional images.
Depending on your needs, using jCarousel driven by a flat JavaScript array you could save some load time as the image URLs would be rendered in the original markup, but not downloaded by the browser until they are added to the visible portion of the carousel. No AJAX required. Here's a demo.