I have a table with images in it and I am trying to make it so when you click on an image, it then makes that image fullscreen, and you can then click on the fullscreen image and its back to the image table.
I am using phonegap so all of this will be on mobile using html, javascript, css and such. Is there anyway to this without having to link to another page?
Thanks for any help!
If you are using Jquery, use Jquery Dialogs. if you are using Jquery Mobile, use popups. Set the onclick method of your image-click to open the popup.
If using Jquery, you can use this code to generate a popup image to full screen (using a dialog).
For the link in your table:
<a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">
<img border="0" src="abc.jpg" width="100" height="100">
</a>
For the popup:
<div data-role="main" class="ui-content">
<h2>Welcome to my Popup Dialog!</h2>
<p>jQuery Mobile is FUN!</p>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">
<img border="0" src="abc.jpg" width="1000" height="1000">
</a>
</div>
This should give you an idea.
Anyway there are heaps of examples online. Happy Googling!
Related
In my page I inserted a PrettyPhoto gallery.
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image01.jpg'">
<img src="image01.jpg" width="200px" />
</a>
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image02.jpg'">
<img src="image02.jpg" width="200px" />
</a>
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image03.jpg'">
<img src="image03.jpg" width="200px" />
</a>
I used onClick event to hide URL in status bar. But, when I try to visualize the photo gallery I view only clicked image.
How it's possible to resolve this problem?
I don't think setting the href like this will work, try location.href instead
This seems to be a Safari exclusive bug, and I can't seem to find any information on why it might even be happening.
It's only on Safari, and only using SVG.
I am using the Data Attribute rollover technique using jQuery.
$("img.rollover").hover (->
imgRolloverSwap($(#))
), ->
imgRolloverSwap($(#))
imgRolloverSwap = ($img)->
srcName = $img.attr('src')
$img.attr('src', $img.data('rollover'))
$img.data('rollover', srcName)
The SVG is embedded with the IMG tag, and basically all it does is switch out the rollover image for the one inside the data attribute.
My HTML is thus:
<div id="social-links">
<a href="https://www.facebook.com/pages/StackCommerce/220449001487225">
<img data-rollover="/assets/img/footer/facebook-rollover.svg" class="rollover" type='image/svg+xml' src="/assets/img/footer/facebook.svg" />
<!-- <img class="rollover" src="/assets/img/footer/facebook.svg" alt="facebook link" target="_blank"> -->
</a>
<a href="https://www.linkedin.com/company/stackcommerce">
<img class="rollover" src="/assets/img/footer/linkedin.svg" alt="linkedin link" target="_blank">
</a>
<a href="https://plus.google.com/u/0/b/104759401634432683234/104759401634432683234/aboute">
<img class="rollover" src="/assets/img/footer/google.svg" alt="google plus link" target="_blank">
</a>
<a href="https://twitter.com/stackcommerce">
<img class="rollover" src="/assets/img/footer/twitter.svg" alt="twitter link" target="_blank">
</a>
</div>
The CSS(Sass) is this:
#social-links {
#extend .col-xs-12, .col-sm-3, .col-md-2;
a {
#extend .col-xs-3, .col-sm-6;
margin-bottom: 15px;
}
img {
#extend .img-responsive;
}
}
However, on first hover the image works, but when you roll off, the image gets smaller.
This happens if you use the jQuery technique or if you use vanilla JS to change out the src name with a regular expression.
This doesn't happen to other image formats, and I have tried setting different 100% widths on nearly every element of the cascade.
Fixes from these threads don't seem to be fixes:
SVG resizes on hover in safari only
Scaling/Resizing SVG in an HTML
Rollover SVG images resizing in Safari and IE
Perhaps someone can shed some light on why this is happening, or a technique to help in Safari?
You can see it here on this page, and at the bottom of it in the footer.
http://beta.stackcommerce.com.s3-website-us-east-1.amazonaws.com/publishers/
Thanks in advance!
I'm trying to get the image gallery functionality from Featherlight to work. It is a jQuery add-on and I've followed their directives from their web-site (http://noelboss.github.io/featherlight/) but unfortunately I can't get it to work as intended. What I'm trying to achieve is an image gallery presentation by clicking on an image thumb. From the gallery I should be able to navigate among the images included in the gallery with previous, next icons. I've added links to the css-style file as well as the js-file. Enterd the HTML-code for the gallery and added javascript code for settings to the gallery.
I'm a newbie to javascript so it may be some very basic thing and I would really appreciate any hint on what is wrong.
Code can be found at:
http://jsfiddle.net/ovedexlin/69qZx/
HTML-code:
<div class="adImages">
<div class="row">
<a class="thumbnail gallery" href="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg">
<img src="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg" alt="thumb1" width="250" height="200">
</a>
<a class="thumbnail gallery" href="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg">
<img src="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg" alt="thumb2" width="250" height="200">
</a>
</div>
</div>
JS-code:
$(document).ready(function(){
$('a.gallery').featherlightGallery({
gallery: {
previous: '«',
next: '»',
fadeIn: 300
},
openSpeed: 300
});
});
Your code looks fine (though you may want to set width and hight with css), but you didn't include the featherlight.gallery.min.js, just the css.
Updated fiddle: http://jsfiddle.net/z28D7/
Hi, my FancybBox code works but then I start adding wowslider code then only the wowslider works properly. How do I solve this?
Here is the link to the page:
http://makaticitycondo.com/execstud_greenbelthamilton.html
If you click on Inquire Now button, a lightbox iframe is supposed to appear. But instead redirects it to a new page.
How can we solve this?
In link specify the attribute data-fancybox-type="iframe"
Refer the link
HTML:
<a class="fancybox" data-fancybox-type="iframe" href="inqsend_ghes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/inquire.png',1)"><img src="http://makaticitycondo.com/images/inquired.png" name="Image2" width="204" height="120" border="0" id="Image2"></a>
I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.
Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once
document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.
$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.