So i tried to make my gallery more better. I want when user click on element to open image in the middle of the screen. I'm sure that there is efficient way to do this with adding class or something.
What should i do ?
HTML
<ul class="gallery">
<li>
<img src="img/1.png" />
<div class="caption" onclick="view('1.png')">
<div class="blur"></div>
<div class="caption-text">
<h1>+</h1>
</div>
</div>
</li>
<li>
<img src="img/2.png" onClick="view('2.png');">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>+</h1>
</div>
</div>
</li>
<ul>
Javascript:
<script type="text/javascript">
function view(imgsrc) {
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
I think I have exactly what you are looking for.
You can look for some css and an example here
This is where the magic happens:
popup = {
init: function(){
$('li').click(function(){
popup.open($(this));
});
$(document).on('click', '.popup img', function(){
return false;
}).on('click', '.popup', function(){
popup.close();
})
},
open: function($li) {
$('.gallery').addClass('pop');
$popup = $('<div class="popup" />').appendTo($('body'));
$fig = $li.clone().appendTo($('.popup'));
$bg = $('<div class="bg" />').appendTo($('.popup'));
$close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig);
$shadow = $('<div class="shadow" />').appendTo($fig);
src = $('img', $fig).attr('src');
$shadow.css({backgroundImage: 'url(' + src + ')'});
$bg.css({backgroundImage: 'url(' + src + ')'});
setTimeout(function(){
$('.popup').addClass('pop');
}, 10);
},
close: function(){
$('.gallery, .popup').removeClass('pop');
setTimeout(function(){
$('.popup').remove()
}, 100);
}
}
popup.init()
This should cover the popup logic.
For the centering issue you should check out the link above and look at the css documentation
Fabio Ottaviani's work, nicely done.
Hope it helps :)
You might want to try out imgZoom, a jQuery plugin to easily integrate zooming function to your current images: http://odyniec.net/projects/imgzoom/
Related
how to make this img clickable after hover?
<div class="mix col-lg-6 col-md-6 digital">
<a href="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" class="portfolio-item set-bg " data-setbg="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg">
<div class="pi-inner">
<h2>OPEN GALLERY</h2>
</div>
</a>
</div>
Add a click event to the a tag like,
<a href="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" class="portfolio-item set-bg " data-setbg="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" onclick="doStuff()">
In the doStuff(), do whatever you need to happen when the image is clicked.
using javascript, you could do it like this:
var clickable = false;
var img = document.getElementById('IdOfyourELement');
img.addEventListener('mouseenter', function(){
clickable = true;
});
img.addEventListener('mouseleave', function(){
clickable = false;
});
img.addEventListener('click', function(){
if(clickable) {
//doWhatEverThing
}
});
You could also try and add the variable clickable to your element to avoid using globals.
Like this:
img.clickable = false;
img.clickable = true;
I have a gallery function with an imagezoom at the big image.
When the big image is changed and i click on it to activate the zoom function, it shows the old image.
I think the variable isnt changed in javascript?
<script type="text/javascript">
function change_img(imgurl) {
image = document.getElementById('preview');
image.src = imgurl
imageURL = imgurl
}
$(document).ready(function(){
var imageURL = document.getElementById('preview').src;
$('#ex3').click(function() {
var imageURL = document.getElementById('preview').src
$('#ex3')
.zoom({ on:'click', magnify:1.8, url:imageURL })
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block');
})
});
EDIT:
This way the thumbnails will be created:
<span class='zoom' id='ex3'>
<img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
<span class="zoom-btn"></span>
</span>
<!-- BEGIN thumbs -->
<div class="thumbnails">
<img id="thumbimg" onclick="change_img('{PATH}/{thumbs.ID}')" name="img" src="{PATH}/{thumbs.ID}" alt="" />
</div>
<!-- END thumbs -->
In javascript .zoom it should be the changed path at "url:imageURL".
Anyone knows how to get the actual path in imageURL?
EDIT: Will this work?--I'm honestly not sure if this zoom function changes the img source or not. If it doesn't, changing that from here, should be fairly easy. There seemed, from a search, to be several of which you could be using.
<span class='zoom' id='ex3' data-src="changedimg.jpg">
<img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
<span class="zoom-btn"></span>
</span>
<script type="text/javascript">
$(document).ready(function(){
$('#ex3').click(function() {
var newURL = this.data('src')
$('#ex3')
.zoom({ on:'click', magnify:1.8, url: newURL })
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block');
})
});
</script>
I have searched and tried many things to do this such as closest() and parents() and parent() and find() But i couldnt make it to work at all .
I have this html
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width = '28px' src="link to image" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'> hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'></div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'></div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng"></div>
</div>
</div>
</div>
So what i want is when i click on on div class deletepng i want to remove the two divs unlikepng and likepng .
this js
$(document).on ("click", ".deletepng", function () {
$this = $(this);
//alert( $this.closest(".like").html()); I could just make this to work
// alert( $this.parents(".like_holder").html()); wont work
// alert( $this.closest(".like_holder").html()); wont work
// alert( $this.parent().parent().html()); wont work
// alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
});
I just wonder why they dont work those my trying . Where it can be my mistake ?
EDIT:
i dont know if this have a role or not , i have what i tried inside Dialog box like that
$(document).on ("click", ".deletepng", function () {
$this = $(this);
$('<div>' + c_delete + '</div>').dialog({
resizable: false,
buttons: {
"Yes": function() {
chat_text_h.html('<div class="removed"> Removed</div>'); // do something here
$(this).dialog("close");
//alert( $this.closest(".like").html()); I could just make this to work
// alert( $this.parents(".like_holder").html()); wont work
// alert( $this.closest(".like_holder").html()); wont work
// alert( $this.parent().parent().html()); wont work
// alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
}
}
});
});
use closest then use the second argument as the context.
$(document).on("click", ".deletepng", function() {
var $holder = $(this).closest('.like_holder');
$('.likepng, .unlikepng', $holder).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width='28px' src="link to image" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'>hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'>like</div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'>unlike</div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng">delete</div>
</div>
</div>
</div>
EDIT
Since your update, you need to set a global variable to remember $this or the container/holder. try this:-
var $holder;
$(document).on("click", ".deletepng", function() {
$holder = $(this).closest('.like_holder');
$('<div>' + c_delete + '</div>').dialog({
resizable: false,
buttons: {
"Yes": function() {
chat_text_h.html('<div class="removed"> Removed</div>');
$(this).dialog("close");
$('.likepng, .unlikepng', $holder).remove();
}
}
});
});
$this.closest(".like").html(); => this will return HTML of parent div, where delete button is. Not removing the element
$this.parents(".like_holder").html() => this will return html of div.message_holder. Not removing the element.
$this.closest(".like_holder").html() => this will return html of div.like_holder
$this.parent().parent().html(); close enogh, but still far => html of div.like_holder
$this.closest(".like_holder").find(".like_holder").html(); return null => no child element with class like_holder in div.like_holder.
Kind of example
$(document).on ("click", ".deletepng", function () {
var $parent = $(this).parent().parent();
$parent.find('.likepng').remove();
$parent.find('.unlikepng').remove();
});
.deletepng{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width = '28px' src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'> hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'> like me</div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'> unlike me</div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng">delete button</div>
</div>
</div>
</div>
UPDATE
If you want to make it from dialog box, or other things - you can't use this variable. This is not making any sense. You should provide unique id to your message_box and then use it, like
$(id_of_message_box).find('.likepng, .unlikepng').remove()
or as I can see from your code:
var $parent = $this.parent().parent();
$parent.find('.likepng, .unlikepng').remove();
It means you should use $this in your function instead of $(this)
You can access the parents parent of your $(this) like:
var likeholder;
likeholder = $(this).parent().parent();
However this is generally ill advised. You'll have a jquery object though.
Let me know how you get on
In order to select the parent of a parent of an element you try this:
$(document).on ("click", ".deletepng", function () {
alert( $($(this).parent()).parent().html());
});
Since you can only execute the parent() method on Jquery Objects.
Here's an example unrelated to your code. JSFiddle.
Try this, you need sibling of parent;
alert( $this.closest(".like").parent().find(".unlikescore").html());
alert ($this.closest('.like').siblings('.unlikepng').html()) ;
working js fiddle
I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}
I have built my first jQuery mobile image gallery, but I have a bug I can't seem to fix. When an image is tapped it pops up to full screen and to carousel all the images I can swipe the images or tap prev/next arrows.
Edit: The problem has changed slightly since I wrote this question, therefor I need to make a few changes in my question and my code.
The images now swipe to every other image, according to the order they are shown in the gallery. I'm dynamically adding a data-index to each image, but somehow the result is tabindex="0" for each image that pops up.
<body>
<!-- gallery content -->
<div data-role="content" id="pagecontent" class="gallerycontent">
<a href="#imgshow" data-transition="pop" data-rel="dialog">
<img src="../img/someimage.jpg" alt="someimage.jpg"/>
</a>
<!-- plus more unordered images -->
</div> <!--/content-->
</div><!-- /page -->
<!-- full screen image preview -->
<div data-role="dialog" id="imgshow" data-theme="d">
<div data-role="header" data-theme="d">
<div id="dialoghead"></div>
</div>
<div data-role="content" data-theme="d">
<center><div id="dialogcontent"></div></center>
</div>
<div data-role="footer">
<center>
Previous
Next
</center>
</div>
</div>
</body>
The 'on-touch' function and 'gonext' function in jquery.
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$(this).parent().addClass('selectedimg');
});
function gonext() {
var current = $('a.selectedimg');
if (current.hasClass('last')) {
var next = $('a.first')
} else {
var next = current.next();
}
var src = next.find('img').attr("src");
var alt = next.find('img').attr("alt");
next.addClass('selectedimg');
current.removeClass('selectedimg');
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
}
Any thought or hints?
I think the problem might be that the selectedimg class isn't being removed when the popup is opened. Try adding this line
$('.selectedimg').removeClass('selectedimg');
just before the addClass line into this function, like this:
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$('.selectedimg').removeClass('selectedimg');
$(this).parent().addClass('selectedimg');
});