As you know, new Magento RWD theme is using elevate-zoom script on product view page for zooming and switching images: magento demo product.
I would like to implement 'Gallery & Lightbox' option from elevate-zoom example.
I tried to edit media.phtml and app.js as well, but without luck.
Maybe someone have a solution for this?
Thanks,
Vlad
Make sure you have fancybox plugin installed together with any dependencies, i.e, mousewheel.
Best to include these in your local.xml (app/design/frontend/YOUR_PACKAGE/YOUR_THEME/layout/local.xml), e.g:
<?xml version="1.0"?>
<catalog_product_view>
<reference name="head">
<action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.mousewheel-3.0.4.pack.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.fancybox-1.3.4.patch.js</name></action>
<action method="addItem"><type>skin_css</type><name>js/fancybox/jquery.fancybox-1.3.4.css</name></action>
</reference>
</catalog_product_view>
Copy app.js into your theme (maintaining directory structure) then add/edit the following:
image.elevateZoom({
gallery:'gallery_01',
cursor: 'pointer',
galleryActiveClass: 'active',
imageCrossfade: true,
loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
});
Copy media.phtml into your theme (maintaining directory structure) so it uses a containing div for the gallery group immediately followed by anchor tags containing the necessary data-attributes as follows (from around line 67):
<div class="more-views">
<div class="product-image-thumbs" id="gallery_01">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php
if (($filterClass = $this->getGalleryFilterHelper()) && ($filterMethod = $this->getGalleryFilterMethod()) && !Mage::helper($filterClass)->$filterMethod($_product, $_image)):
continue;
endif;
?>
<?php $galImg = $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(800); ?>
<a class="thumb-link" href="#" data-image="<?php echo $galImg; ?>" data-zoom-image="<?php echo $galImg; ?>">
<img id="img_<?php echo $i; ?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
<?php $i++; endforeach; ?>
</div>
You will probably have to apply css after changing the markup within media.phtml
This is the correct code for app.js
image.bind("click", function(e) {
var ez = image.data('elevateZoom');
image.fancybox(ez.getGalleryList());
return false;
});
Add this after:
image.elevateZoom();
Related
I'm building a custom Wordpress theme locally and using Advanced Custom Fields for much of the content alongside custom post types.
I'm currently building the gallery section and want to use lightbox - the two size images are custom size featured images.
Before I add the lightbox anchor image my code looks like this:
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'featured-image-shop', true );
?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?>">
</a>
However - when I then add in the lightbox images - the lightbox functionality works fine - but makes the page jump slightly on page load. The code looks like this:
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'featured-image-shop', true );
?>
<a href="<?php echo $thumbnail_url[0];?>" data-lightbox="gallery-images" data-title="<?php the_title();?>">
<img class="gallerypics" src="<?php echo $thumbnail_url[0];?>" alt="<?php the_title();?>">
</a>
Any ideas why this happens? I thought maybe it could be a javascript issue but even if I simply add an image in the anchor without the data-lightbox attribute it still jumps.
Perhaps someone has come across this issue before?
It's ok - just the act of writing this down gave an the answer so I thought I'd share for anyone who may have the same issue. I needed to add
html { overflow-x:auto; overflow-y:scroll; }
This forces the scrollbar to be there before the content is fully loaded which is why it was jumping before!
I have met a problem on WordPress site:
None images uploaded as media files are showing. I see they have wrong url like this
<a class="thumbLink" href="http:///wp-content/uploads/2014/10/Joseph-Angharad-11.7.2014-271.jpg" rel="prettyPhoto[gallery1]" title=""><i class="icon-search"></i></a>
I've tried to upload new media files and they get similar url and don't displayed.
In the database it seems ok. I don't see such url in it.
Have you met such a problem? Where to look resolving?
As far as I know it happened before removing a plugin (which was inactive).
I get images via the following code:
// instantiate the controller
if (!function_exists("peTheme")) {
$peThemeClassName = apply_filters('pe_theme_controller_classname','PeTheme'.PE_THEME_NAME);
PeGlobal::$controller =& new $peThemeClassName();
function &peTheme() {
return PeGlobal::$controller;
}
peTheme()->boot();
}
<?php $t =& peTheme(); ?>
<section class="thumbImage">
<img src="<?php echo $t->image->resizedImgUrl($content->get_origImage(),350,0); ?>" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle"><?php $content->title(); ?></h3>
<?php
$text = get_the_excerpt();
if (strlen($text) > 40)
$text = substr($text, 0, 40) . '...';
echo '<p>' . $text . '</p>';
?>
<?php while ($slide =& $slider->next()): ?>
<?php $img = $slide->img; ?>
<?php
if ( $first ) {
?>
<a class="thumbLink" href="<?php echo $img; ?>" rel="prettyPhoto['<?php $content->slug(); ?>']" title=""><i class="icon-search"></i></a>
<?php
$first = false;
} else {
?>
<?php
}
<?php endwhile; ?>
</div>
</div>
</section>
It quite silly of me but I didn't disable plugins to check.
The problem was in a Parallelize plugin. It has been disabled and from now media files have right url.
This post may be a little outdated, but I had a similar recent issue so in case it proves useful to anyone:
To start, I had previously changed the Wordpress upload directory by adding the following to the end of wp-config.php
define( 'UPLOADS', ''.'files' );
So all my files are saved in domain.com/files/ After upgrading to Wordpress 4.5, all media files had very wrong url, (with something crazy like .../wp-content/uploads/rootuser/public_html/wp-content/uploads...) I tried reinstalling Wordpress, changing the directory again, disabling plugins, then I found a few posts about the Search & Replace working for some, but still no luck.
Then I found this plugin, Upload Url and Path Enabler and used the following settings that suited my situation:
Store Files: files
Full File URL: http://www.domain.com/files
And presto! All media URLs magically updated and all is working again!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to add a div around every image that is posted on my wordpress blog post.
How can I do it?
(For the curious ones, I'm attempting to pop out some share buttons whenever a user hovers over an image).
Add the following snippet of code into your functions.php file:
add_filter( 'image_send_to_editor', 'wp_image_wrap_init', 10, 8 );
function wp_image_wrap_init( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
return '<div id="wp-image-wrap-'. $id .'" class="wp-image-wrap">'. $html .'</div>';
}
So this solved everything :) !
Thank you guys for your help here. I hope it will be useful to others.
function breezer_addDivToImage( $content ) {
// A regular expression of what to look for.
$pattern = '/(<img([^>]*)>)/i';
// What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
$the_url = the_permalink();
$replacement = '<div class="imgWrap">
$1
<div class="imgDescription">
<div class="theShareLinks">
<img src="http://localhost/mysite/wp-content/uploads/2014/08/dfc2.png" />
<a href="http://www.facebook.com/sharer.php?u='.get_the_permalink() .'?" class="img-facebook" title="Share on Facebook" target="_blank" onclick="window.open(this.href, \'newwin\', \'width=500, height=200\'); return false;" ></a>
</div>
</div>
</div>';
// run preg_replace() on the $content
$content = preg_replace( $pattern, $replacement, $content );
// return the processed content
return $content;
}
add_filter( 'the_content', 'breezer_addDivToImage' );
If it's as simple as you make seem, just switch to the text editor, or disable the visual editor, and add the div around every image you insert. Give them all the same class, and then add your style for that class in your stylesheet.
-- Or, if you want to apply this to all kinds of pages on your Wordpress installation (Pages, Posts, Archives, Categories etc): --
Dive into the FTP, and start having a look in your themes folders and files.
You've got different pages for different views. attachment.php, page.php etc. Depending on which view you want to change, these files will include a line that may look similar to this:
<p class="attachment">
<a href="<?php echo wp_get_attachment_url( $post->ID ); ?>" title="<?php the_title(); ?>" rel="attachment">
<img src="<?php echo $att_image[0]; ?>" width="<?php echo $att_image[1]; ?>" height="<?php echo $att_image[2]; ?>" class="attachment-medium" alt="<?php $post->post_excerpt; ?>" />
</a>
</p>
Or anywhere that mentions
<img src="<?php echo $att_image[0]; ?>" />
Just add a div around that, and add a styling rule in your stylesheet.
I need wordpress plugin for this kind of header image http://www.slb.com/services/drilling.aspx like in this web site. And this image will not be slider but it's static image on perticular page and category and also different image for all categories and pages.
Easiest & best way is create a custom field named banner & in your header.php place below code.
<div class="banner">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<?php endif; ?>
<div>
But as you want plugin to do this, have a look at plugin named Dynamic Header.
I am building out a site in drupal 7 and running into a ton of problems... very new to drupal here.
I pulled the php call for the logo out of the page.tpl file and put into the header block to be added to all pages. I understand I should probably just leave it in the page.tpl file but thought it made sense to utilize the header block but it is no longer working. can someone explain why this is not working?
here is the code
<div id="logo"><?php if ($logo): ?>
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
<?php endif; ?></div>
It's because the variable $logo is not available in block.tpl.php, it is provided only to page.tpl.php.
You can actually grab the values yourself like this:
$theme_name = 'name_of_theme';
$settings = variable_get('theme_' . $theme_name . '_settings', array());
if (isset($settings['logo_path'])) {
$logo = file_create_url($settings['logo_path']);
}
all what you need, it's additions in template.php this code
function hook_preprocess_region(&$variables) {
$variables['logo'] = theme_get_setting('logo');
$variables['front_page'] = variable_get('site_frontpage', 'node');
}
clear cache
and $logo and $front_page will works good.