I'm trying to accomplish the following task: I have a page that has several images, 1 is large and is the main image and then several images below which are sized smaller. What I want to do is that when a user clicks one of the smaller images, that image is loaded and replaces the main product image.
An example of one of my pages is: http://footybootsdb.com/adidas-x16-1/
I would like this to occur on multiple different pages so any code that can be implemented on several pages would be appreciated.
The page is configured using the 'Page Builder' plugin for Wordpress.
You can do it using js. Firstly place a big-sized image's url on the small-sized image via the data attribute like this:
<div id="divContainBigSizeImage">
<img class="small-size" src="http://main-image.jpg"
</div>
<img class="small-size" src="http://image-with-small-size.jpg" data-big-size="http://image-with-big-size.jpg">
<img class="small-size" src="http://another-image-with-small-size.jpg" data-big-size="http://another-image-with-big-size.jpg">
Then you can bind js click event to that image to gain the big-sized image's url. If using jquery, it looks like this:
$('.small-size').on('click', function() {
var bigSizeUrl = $(this).data('big-size'); // get the big-sized image's url
var newImgHTML = '<img src="' + bigSizeUrl + '">'; // create an html element
$('#divContainBigSizeImage').html(newImgHTML); // replace the current big-sized one
})
Install a light box plugin, when user clicks on the image, it will open the bigger version.
Related
Here is my problem, I have an iframe of a wordpress page (with stripped header/fooder/sidebar) with lots of links and I want when the user clicks on the links for them to open on the parent window and not the iframe.
I know I can use:
<a target="_parent" href="http://url.org">link</a>
on the links, but since the links point to wordpress posts and the list of posts is updated dynamically, this isn't a very good option. I can't edit them one-by-one to add the target. Plus, it might interfere with the rest of the site's links.
Another option is to use
<base target="_parent">
on the iframe header but I don't know how to do that.
Suppose I have this code to add the iframe:
<iframe class="bg-dark3" style="border: none;" src="https://www.google.com" scrolling="no"></iframe>
Where and how can I add the <base target="_parent"> line?
You can add this to your Wordpress site. It's Jquery to open the links in the parent. So please make sure Jquery library is loaded.
$('a').click(function(){
//Get url from anchor
var link = $(this).attr('href');
//Open url in parent
window.parent.parent.window.location = link;
});
This will automatically open the links in the parent, you wouldn't need to add target=_parent to each link manually.
I write a post in new post editor and then add media. I can see the images in the editor but when i publish them they aren't loading up and a frame with little square in the middle comes up. This is the link to one of my posts: http://getprogramcode.com/2013/03/c-program-for-bit-stuffing/ . For some people only link to the image comes up and it opens up with 404 error. See the line after OUTPUT: bit stuffing.
Also i want to remove the featured image from appearing in my posts. I have a option in my theme on a new post: "disable featured image" - but that doesnt work . Also if i dont put the image or i remove the featured image the empty image appears: see the home page: http://getprogramcode.com Please help me to solve this problem
You should not use relative paths on WordPress, only Absolute paths.
The problem is that you are using ../wp-content/... as your URL's for image paths.
When adding images, you should have the option to give it a path, you should opt to link to the media file.
For the disable feature image, if you go into the page.php or single.php code, it should have a line of code in it for calling in the featured image.
It should look something like this:
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
You just need to remove or comment out this code and it should stop showing up on the pages.
I'm busy with an Wordpress website. On this website there are some images with an hover.
When the hover is active it will change from black/white to color image.
Now as you can see on the website, top right you see the images.
When you hover the color change. But when you're on the page http://www.freshymedia.nl/inge/site/ the first image needs to be colored.
And for example when you're on this page: http://www.freshymedia.nl/inge/site/contact/
The last image needs to be colored and the rest only needs to hover when you want to hover it.
Anyone has a solution for me?
The website has been build in Wordpress.
The way I do things to test for current pages is by using the functions.php for this code:
$host = $_SERVER['REQUEST_URI']; //finding out the url
$contactimg = 'http://LINK TO YOUR B&W IMAGE.jpg'; //B&W image link - the normal image
if ($host == '/contact/') //if url is contact
{
$contactimg = 'http://LINK TO YOUR COLOUR IMAGE.jpg'; //Current page image
}
Then in the code where your images are you'd have:
<img src="<?php echo $contactimg ;?>" />
Hopefully that makes sense...
Also to check what url to put in instead of "contact" you can echo host on a page
<?php echo $host;?>
That'll display the url for the page that you are currently on.
first time I'm trying to do this so please bear with me :)
I'm building a WordPress theme, and while using wp_nav_menu I'm trying to replace a generated link text with a custom image I made.
So, in essence, what I need done:
1) this text needs to be replaced
2) <img src="<?php bloginfo('template_url'); ?>/images/with-this-image.png" />
I've tried some different tests with jQuery, but I can't find the right combination to make it work.
Any help would be greatly appreciated, thanks!
replace the text that is generated "this text needs to be replaced" with
<img src="/images/with-this-image.png" />
if you want to do it with jquery drop an ID on the a tag and reference that ID.
Create a new menu so you don't overwrite your current one (makes it easier to switch back if you decide to change it.
In the new menu you've created, instead of adding pages or posts the traditional way (using the check-boxes and adding to menu), you can use this method:
Open a blank page (it won't be saved, it's just easier to get the html code for the next step). With the blank page open, click HTML to enter HTML view. Now upload the image you want to use for the navigation link. Copy the html code (make sure you don't copy the P Tags. The coppied result would look something like this:
<img src="http://yoursite.com/wp-content/uploads/2011/08/Home48x48.png" alt="Home" title="Home" width="48" />
Now to add it to the new menu created:
Go to the new menu you created and paste your image source from the last step into the custom menu label (if the menu items are already added it will say navigation label) where the field that has URL is where you'll add the actual link to your page.
The problem isn't that complex (compared to the description I'll write :)) but I'd like to do this as correct as possible (e.g. I could be doing it wrong with Home.php), so I'll give you the whole context.
As a part of my design, the page displays different background images. For that I use Supersized, "a fullscreen background slideshow built using the jQuery library". Some of my pages use one background image (no slideshow obviously :), and some use three. Also, I use javascript to detect the users monitor resolution and serve him an appropriate image size:
var imageToBeLoaded = "images/bg_index.jpg";
$(document).ready( function () {
if(window.screen.width > 1024) {
imageToBeLoaded = "images/bg_index_large.jpg";
}});
So the problems are:
a) Home.php isn't a page accessible through WP-Admin so I can't give it custom fields.
Solution: if (isHome()){ setDefaultalues();}
b) If I'm not on the homepage, I need to get the custom fields key/vaules but only for the properties that are related to the image background (and as I said before, ever page has 1 to N number of background images). For example, my About page has 5 properties, bgImg1, smallImg1, bgImg2, smallImg2 and greeting text. That means I need to get all the variables and parse the name so I can get e.g. bgImg1 and bgImg2. Additionally, Supersized needs a text description as another parameter, so the page needs to have two more parameteres, desc1 and desc2 which I also need to get and combine with the appropriate bgImg so I can generate output that looks like this (from the static page):
{image : 'images/bg_rwanda.jpg', title : 'Rwanda Home'}, {image : 'images/bg_rwanda2.jpg', title : 'Rwanda School'}
Pseudocode would look something like this:
var output = "{image : '";
var imageIsLarge= false;
if (getResolution() > 1024 ) { imageIsLarge= true; }
while (hasNextProperty()){
Property prop = nextProperty();
if (imageIsLarge) {
if (prop.getKey().startsWith (bgImageL)){
output += prop.getValue()+", title:";
// etc. Also, I need to set the code to first get the first img,
// not just in any order and pair it with the first description
Now this seems a bit complex and I have a feeling I could do it simpler, but I have no idea how.
To set a different backgrounds on any page of WordPress all you need is CSS. WordPress automatically adds a unique class to each page or post so you'll need to target the tags background in your style.css.
View the source of any WordPress page or post.
Note the classes assigned to the body i.e. <body class="home page page-id-24 ...> or post-id-25 if you're adding a background to a post.
Edit your style.css using body.page-id-93{ background:blue !important;} you might need to use !important because of other styles applied to the body.
Now you can do the same for every page or post.