Image zoom/magnify using javascript plugin, in django framework - javascript

I have a hard time incorporating a magnifying javascript plugin feature.
Basically, I was able to run this plugin on a static html template with static images. but I can't seem to run it at all on my django built website.
<!DOCTYPE html>
<html>
<head>
<title>Items</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>EasyZoom, jQuery image zoom plugin</title>
<link rel="stylesheet" href="css/example.css" />
<link rel="stylesheet" href="css/pygments.css" />
<link rel="stylesheet" href="css/easyzoom.css" />
</head>
<body>
{%if entry.image_set.get.imgfile%}
<!-- images are extracted from the entry model -->
<div class="easyzoom easyzoom--overlay">
<a href="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}">
<img src="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}" alt="Green-SLI" />
</a>
</div>
{%endif%}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/easyzoom.js"></script>
<script>
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});
</script>
</body>
</html>
My images are located inside entry model, and they are extracted from there. Does that have an impact on whether the magnify script will work or not? Since they are not exactly static.
Also, I have multiple css files, not sure if that impacts anything. I disabled the main css in the base template to see if it was interfering, but still nothing.
Is there a more efficient way that I incorporate a magnifying function? I have no experience really with javascript.
Here is the modified code that actually works.
> {% load staticfiles %}
>
> <!DOCTYPE html> <html> <head> <title>Items</title> <meta
> charset="utf-8" /> <meta http-equiv="X-UA-Compatible"
> content="IE=Edge;chrome=1" />
>
> <title>EasyZoom, jQuery image zoom plugin</title>
>
> <link rel="stylesheet" type = "text/css" href={% static "css/easyzoom.css" %} /> </head> <body> {%if
> entry.image_set.get.imgfile%}
>
>
> <div class="easyzoom easyzoom--overlay">
> <a href="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}">
> <img src="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}" alt="Green-SLI" width = '240' height ='180' />
> </a> </div> {%endif%}
>
>
>
> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
> <script type="text/javascript" src="{% static "css/easyzoom.js"
> %}"></script> <script> // Instantiate EasyZoom instances var
> $easyzoom = $('.easyzoom').easyZoom();
>
> // Setup thumbnails example var api1 =
> $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
>
> $('.thumbnails').on('click', 'a', function(e) { var $this =
> $(this);
>
> e.preventDefault();
>
> // Use EasyZoom's `swap` method
> api1.swap($this.data('standard'), $this.attr('href')); });
>
> // Setup toggles example var api2 =
> $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
>
> $('.toggle').on('click', function() { var $this = $(this);
>
> if ($this.data("active") === true) {
> $this.text("Switch on").data("active", false);
> api2.teardown(); } else {
> $this.text("Switch off").data("active", true);
> api2._init(); } }); </script> </body>
>
>
>
> </html>

Related

Scroll Function is Not Working

I tried to change the width of div dynamically while scrolling.But it is not working.I have jquery-1.11.3.min.js in my directory and connect it with HTML file.The scrollfunction in my script appears in brown color instead of black.
This is my HTML file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="BooksExchanger.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<script src="BooksExchanger.js"></script>
<div id="packet"style="position:fixed">
<h1 id="welcome" >Welcome</p>
<h2 id="about">You Are Now Entering Into BBE</h2>
</div>
<img src="1.jpg"/>
<img src="2.jpg"/>
</body>
</html>
THis is my JS file(BooksExchanger.js)
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 10 ) {
$("#welcome").css('width', 75);
} else if(scroll_pos > 25 && scroll_pos < 75) {
$("#welcome").css('width', 100);
} else if(scroll_pos > 75 && scroll_pos < 100){
$("#welcome").css('width', 125);
}else if(scroll_pos > 100){
$("#welcome").css('width', 150);
}
});
});
try adding the scroll event to $(window) instead of $(document)

multiselect div using left click and hotkeys in javascript/jquery

before i reinvent the wheel, i wanted to know if anyone already has written a js/jquery library that allows user to select multiple div elements by left clicking and holding the hot keys (just like in windows)
Currently i have only this much
http://jsfiddle.net/abarik/nv9hnusu/3/
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by abarik</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.selected {
background-color:green;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.selectable').click(function (e) {
// $('.console').append('shiftKey'+e.shiftKey)
$('.console').append('ctrlKey'+e.ctrlKey)
if (e.ctrlKey) {
$(this).toggleClass('selected');
}
});
var ids = new Array();
$('#btn').click(function () {
var selected_activities = $('.selected');
var ids = new Array();
selected_activities.each(function () {
var id_str = $(this).attr("id");
var id_arr = id_str.split("_");
var selval = id_arr[1];
if (selval != 'undefined' && selval != '' && selval != null) {
ids.push(selval);
}
});
alert(ids);
});
});//]]>
</script>
</head>
<body>
<div class="left_column">
<div class="selectable selected" id="participant_1">----1----</div>
<div class="selectable" id="participant_3">----2----</div>
<div class="selectable selected" id="participant_5">----3----</div>
</div>
<div class="right_column">
<div class="selectable" id="participant_2">----4----</div>
<div class="selectable" id="participant_4">----5----</div>
<div class="selectable" id="participant_6">----6----</div>
</div>
<input type="button" id="btn" value="Get selected ids">
<div class="console">ctrlKeyfalsectrlKeyfalsectrlKeytruectrlKeytrue</div>
</body></html>
found an library that does exactly what i need to http://evulse.github.io/finderSelect/

Creating tabs with listviews dynamically in jQuery mobile

I am trying to create tabs with listviews in JQM dynamically on a button click. Currently, I use JS array that contains sample data which will finally be populated via ajax. After research, it seems that I should trigger either trigger("create") or trigger ("refresh"), but apparently, I don't do it correctly. Here's the code:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>navbar demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" src="../JS/nav.js"></script>
</head>
<body>
<button onclick="fillCategories()">Fill</button>
<div id = "decisions" > </div>
</body>
</html>
Javascript:
function fillCategories() {
var navElements = [{"category_sublist_id":"1","category_sublist_name":"Europe"},
{"category_sublist_id":"2","category_sublist_name":"Asia"},
{"category_sublist_id":"3","category_sublist_name":"Americas"}];
var categoriesTabs = $('<div id="categories">')
.attr("data-role","tabs")
.appendTo("#decisions");
var navBar = $("<div>").attr("id","categoriesNames")
.attr("data-role","navbar")
.appendTo("#categories");
var listElements = [{"sublist_row_id":"1","category_sublist_id":"1","sublist_name":"Great Britain"},
{"sublist_row_id":"2","category_sublist_id":"1","sublist_name":"Sweden"},
{"sublist_row_id":"3","category_sublist_id":"1","sublist_name":"France"},
{"sublist_row_id":"4","category_sublist_id":"1","sublist_name":"Germany"}];
$("#categoriesNames").append($("<ul>").attr("id","categoriesUl"));
$(navElements).each(function(){
$("#categoriesUl").append($("<li>")
.attr("value", this.category_sublist_id)
.append($("<a>")
.attr("href", "#sublist"+this.category_sublist_id)
.attr("data-theme","a")
.attr("data-ajax","false")
.text(this.category_sublist_name)));
});
$("#categories").append(navBar).trigger("create");
categorySublistView("categories", "sublist2", listElements);}
function categorySublistView(elementId, listLink, listData) {
var listId = listLink+"id";
var tab = $("<div>").attr("id",listLink)
.addClass("ui-content")
.appendTo("#"+elementId);
var list = $("<ul>").attr("data-role","listview")
.attr("data-inset","true")
.attr("data-icon","false")
.attr("id", listId)
.appendTo("#"+listLink);
$(listData).each(function(){
var li = $("<li/>")
.attr("value",this.sublist_row_id)
.appendTo("#"+listId);
var link =$("<a>")
.attr("href", "#")
.text(this.sublist_name)
.appendTo(li);
});
if ( $('#'+listId).hasClass('ui-listview')) {
$('#'+listId).listview('refresh');
}
else {
$('#'+listId).trigger('create');
}}
edit:
My initial intention was to draw 3 tabs in the navbar which are listviews, which are visible on tab clicks

Responsive menu not opening on 320px screen

I'm trying to implement this (http://www.hongkiat.com/blog/responsive-web-nav/) script for a responsive menu. I followed all the steps and used the proper code, but the menu won't open in a 320px screen width. Can anyone give me a heads up on how to fix this? FYI: I'm a newby in scripting.
Thanks a lot!
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<nav class='clearfix'>
<ul class='clearfix'>
<li>Sea PR?</li>
<li>Sea PR voor...</li>
<li> Press Relations</li>
<li>Copywriting</li>
<li>Websites</li>
<li>Contact</li>
</ul>
Menu
</nav>
</body>
</html>
you may want to remove this:
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
and replace it with
$(window).resize(function() {
if(menu.is(':hidden')) {
menu.removeAttr('style');
}
});
After go through the source of your demo site, it's turn out that you haven't included the nav.js file:
<script src="http://demo.hongkiat.com/_nav/js/nav.js" type="text/javascript"></script>

jQuery Carousel Stop at End

I am making a jQuery carousel that is populated using JSON. I need it to stop at the end. I calculate the width of the list by multiplying the number of list items by the width of the list item, so new items can be added without changing the width in the CSS. Here is my code
slider.js
$(document).ready(function() {
var w = $("#carouselList").css("width");
var slider = $("#carouselList");
var leftProperty, newLeftProperty;
$("#rightButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty - 991 <= -w) {
newLeftProperty = 0;
}
else {
newLeftProperty = leftProperty - 304;
}
slider.animate({left: newLeftProperty}, 500);
});
$("#leftButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty < 0){
newLeftProperty = leftProperty + 304;
}
else {
newLeftProperty = 0;
}
slider.animate({left: newLeftProperty}, 500);
});
});
the HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">
</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->
<script>
$.getJSON('jsonData.json', function(data){
var items=[];
$.each(data, function(key, val){
items.push(val);
$("#carouselList").append(items[2]);
var c =$("#carouselList li").size();
$("#carouselList").css("width", c*250);
});
});
</script>
</body>
</html>

Categories