I am using fancybox for my web application
Jquery
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
afterLoad :function() {
this.title = 'Click to Enlarge';
},
afterShow :function() {
$(".fancybox").zoom({on:"click"});
}
});
HTML
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_b.jpg" title="Sgwd Ddwli Uchaf, Brecon Waterfalls (technodean2000)">
<img src="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg" title="Golden Manarola (Sanjeev Deo)">
<img src="http://farm6.staticflickr.com/5444/17679973232_568353a624_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)">
<img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)">
<img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" />
</a>
I want to when open the fancy box image gallery after i click on center of image at the time if image are bigger than box then that zooming on inner of fancy-box and moving image on courser move.
Here on my code there is 4 images. if 2nd and 3rd image bigger than box then display title "Click to enlarge" and Zooming in on clicking only for 2nd and 3rd image not for 1st and 4th.
Thanks in advance on your replay
You should do like
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
afterLoad :function() {
this.title = 'Click to Enlarge';
},
afterShow :function() {
//$(".fancybox").zoom({on:"click"});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_b.jpg" title="Sgwd Ddwli Uchaf, Brecon Waterfalls (technodean2000)">
<img src="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg" title="Golden Manarola (Sanjeev Deo)">
<img src="http://farm6.staticflickr.com/5444/17679973232_568353a624_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)">
<img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)">
<img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" />
</a>
Related
I want to show status with 0 area as red dot and status with 1 area are green. I used style tag for area. But not color coming on image area. Anybody knows please help me. I am sharing my code below
<html>
<map name="map1" id="_map1">
<?php
foreach ($points as $point)
{
$name=$point->name;
$status=$point->status;
if($status==1){ ?>
<area shape="rect" coords="10,15,18,20" href="<?php echo base_url()?>assets/images/green.jpg" alt="" title="" onmouseover="<?php echo $name; ?>" />
<?php
}
else if($status==0) {?>
<area shape="rect" coords="0,0,50,50" href="<?php echo base_url()?>assets/images/red.jpg" alt="" title="" onmouseover="<?php echo $name; ?>"/>
<?php
}
} ?>
</map>
<img id="map1" src="<?php echo base_url()?>assets/images/rectangle.png" usemap="#map1" border="0" width="800" height="600" alt="" />
</html>
See the example use of <map> Html map tag
The href attribute does not show the image (red or green). It is a hyperlink to the target image. The image displays on the screen is the src file of the <img> tag.
You may need to generate the image dynamically on the server side, or use <canvas> to render the data on the client side.
For Facebook and for Google i found this solution..
<script type="text/javascript">
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
gapi.plusone.go();
}catch(ex){}
});
</script>
but not for tumblr. Does anybody know if there is any solution?
Tubmlr-post-button is implemented like this:
<a class="tumblr-share-button" data-href="http://www.xy.ch/news_entries/<? php echo "{$row['title']}.html" ?>" data-content="http://www.xy.ch/news_entries/<?php echo "{$row['title']}.html" ?>" data-color="blue" data-notes="right" href="https://embed.tumblr.com/share"></a>
Thanks
M
I had to find another solution (because i have another use case) and worked out this:
<img src='http://www.mywebsite.com/share_list.png' data-pin-no-hover="true" class="share_buttons_img" usemap='#share_buttons' />
<map name='share_buttons'>
<area shape='circle' coords='78,21,13,80' href="#" title="Share on Facebook" onclick="popUp=window.open('https://www.facebook.com/sharer/sharer.php?u=www.mywebsite.com/news/<?php echo "{$row['image_title']}.html" ?>','popupwindow', 'scrollbars=yes,width=500,height=400');popUp.focus();return false;" >
<area shape='circle' coords='116,21,13,80' href="#" title="Share on Tumblr" onclick="popUp=window.open('http://tumblr.com/widgets/share/tool?canonicalUrl=http://www.mywebsite.com/news/<?php echo "{$row['image_title']}.html" ?>','popupwindow', 'scrollbars=yes,width=500,height=400');popUp.focus();return false;" >
<area shape='circle' coords='153,21,13,80' href="#" title="Share on Google+" onclick="popUp=window.open('https://plus.google.com/share?url=www.mywebsite.com/news/<?php echo "{$row['image_title']}.html" ?>','popupwindow', 'scrollbars=yes,width=500,height=400');popUp.focus();return false;" >
</map>
I've encountered this issue a couple times but have always found a "hack" way around it. Is there a special way to link an image in a WordPress template to an outside url beyond the typical a href tag? Here's the images I'm trying to link to outside urls:
<div class="socialMedia">
Follow Us: <br />
<img src="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" alt="facebook"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/twitter.png" alt="twitter"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/googleplus.png" alt="google plus"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/instagram.png" alt="instagram"/>
</div><!--.socialMedia-->
<div class="socialMedia">
Follow Us: <br />
<a href="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" target="_blank" > <img src="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" alt="facebook"/> </a>
</div><!--.socialMedia-->
did you mean it!!?
<li><a href='#'>Core Transformation</a>
<img alt='arrow' src=**'http://localhost/wordpress1/wp-content/themes/twentytwelve/images/header-triangle.png'** /></li>
<li><a href=**'#'**>LINKS</a></li>
<li><a href=**'#'**>Contact Us</a></li>
How can I replace the src and href using the site_url() function?
You can use the following ways :
<img src="<?php bloginfo('template_url'); ?>/images/image.jpg" />
<img src="<?php echo get_template_directory_uri();?>/images/image.jpg" />
<img src="<?php home_url();?>/images/image.jpg" />
<img src="<?php echo site_url();?>/images/image.jpg"/>
you can do it same for href
More details refer codex
<img src="<?php echo site_url();?>/images/image.jpg"/>
or a better option would be:
<img src="<?php bloginfo('template_url'); ?>/images/image.jpg" />
You can do similarly for href
site_url() is used to append text on url.. so if you want to navigate to your directory and fetch something you can use it like this..
site_url('/images/default.jpg');
you can replace your src with following way:
<img src="<?php bloginfo('template_url'); ?>/images/yourimagename.extension" />
for more information about wordpress go to http://www.wpbeginner.com/wp-themes/wordpress-theme-cheat-sheet-for-beginners
that will help you more in future.
Still you getting any issues with that,then comment it.
I had set up Galleria Plugin successfully. But the problem is that the thumbnails for each picture is not generating. My code is below
<div id="galleria">
<img title="Image title" src="images/1.jpg">
<img title="Image title" src="images/2.jpg">
<img title="Image title" src="images/3.jpg">
<img title="Image title" src="images/4.jpg">
<img title="Image title" src="images/5.jpg">
<img title="Image title" src="images/6.jpg">
<img title="Image title" src="images/7.jpg">
<img title="Image title" src="images/8.jpg">
<img title="Image title" src="images/9.jpg">
<img title="Image title" src="images/10.jpg">
</div>
jQuery:
<script>
Galleria.loadTheme('js/galleria.classic.js');
$('#galleria').galleria();
</script>
What can I try next?
Never used the script, but what i advise is:
check your jQuery framework file path
check your image paths, try using
exact paths not relative
set script tag with
type="text/javascript" attribute
Good luck
Actually, i changed the display:none for the slideshow window to visibility:hidden and its working!. thanks for all who answered